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 |
||
---|---|---|
.. | ||
compat | ||
experimental/testmode | ||
font | ||
image-types | ||
legacy | ||
navigation-types/compat | ||
src | ||
types | ||
amp.d.ts | ||
amp.js | ||
app.d.ts | ||
app.js | ||
babel.d.ts | ||
babel.js | ||
cache.d.ts | ||
cache.js | ||
client.d.ts | ||
client.js | ||
config.d.ts | ||
config.js | ||
constants.d.ts | ||
constants.js | ||
document.d.ts | ||
document.js | ||
dynamic.d.ts | ||
dynamic.js | ||
error.d.ts | ||
error.js | ||
head.d.ts | ||
head.js | ||
headers.d.ts | ||
headers.js | ||
image.d.ts | ||
image.js | ||
index.d.ts | ||
jest.d.ts | ||
jest.js | ||
license.md | ||
link.d.ts | ||
link.js | ||
navigation.d.ts | ||
navigation.js | ||
og.d.ts | ||
og.js | ||
package.json | ||
README.md | ||
router.d.ts | ||
router.js | ||
script.d.ts | ||
script.js | ||
server.d.ts | ||
server.js | ||
taskfile-ncc.js | ||
taskfile-swc.js | ||
taskfile-watch.js | ||
taskfile-webpack.js | ||
taskfile.js | ||
tsconfig.json | ||
web-vitals.d.ts | ||
web-vitals.js | ||
webpack.config.js |
Next.js
Getting Started
Visit https://nextjs.org/learn to get started with Next.js.
Documentation
Visit https://nextjs.org/docs to view the full documentation.
Who is using Next.js?
Next.js is used by the world's leading companies. Check out the Next.js Showcase to learn more.
Community
The Next.js community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.
To chat with other community members you can join the Next.js Discord.
Our Code of Conduct applies to all Next.js community channels.
Contributing
Please see our contributing.md.
Good First Issues
We have a list of good first issues that contain bugs that have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
Authors
- Tim Neutkens (@timneutkens)
- Naoyuki Kanezawa (@nkzawa)
- Guillermo Rauch (@rauchg)
- Arunoda Susiripala (@arunoda)
- Tony Kovanen (@tonykovanen)
- Dan Zajdband (@impronunciable)
Security
If you believe you have found a security vulnerability in Next.js, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. Email security@vercel.com
to disclose any security vulnerabilities.