c4ba419d5c
## What When users specify `"type": "module"` in Next.js app, especially with `create-next-app`, `Image` component is not working. An error `Unsupported Server Component type: {...}` is thrown. ## Why `next/image` API is mixing with a client component as default export and a named export as server component. But the entry file of the API is still CJS file, which will import the module as the object. So you'll get `{ default, unstable_getImageProps }` when you do `import Image from 'next/image'` instead of `Image` component itself, where the CJS module load all the exports as an object. This is expected behavior for ESM but breaks the usage. It only errors when you're using js extensions, if you're using typescript, it still works. If you're using turbopack, it works in dev mode. This is also because webpack can't analyze the exports from CJS module of that `next/image` entry file. Usually we can assign the default export to the module itself, then attach other named exports onto it, so the default export equals the `module.exports` itself. But for `next/image` since the default export is an client component, doing that will error with React as you cannot modify the react client reference. Turbopack doesn't use the same way to analyze the default export, so it doesn't have this problem. ## How We create few ESM version of entry files of nextjs APIs, then pick up them to let app router for bundling, instead of using the `next/<api name>.js` CJS files. Those ESM entries still point to the `next/dist/..` CJS files. In this way webpack and directly gets the exports from the `next/dist/...` files and be aware of the module exports. No more CJS module wrapping the ESM module, the default and named exports can preserve correctly. Fixes #54777 Closes NEXT-1774 Closes NEXT-1879 Closes NEXT-1923
3 lines
23 B
JSON
3 lines
23 B
JSON
{
|
|
"type": "module"
|
|
}
|