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
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { createNextDescribe } from 'e2e-utils'
|
|
|
|
createNextDescribe(
|
|
'app-dir alias',
|
|
{
|
|
files: __dirname,
|
|
skipDeployment: true,
|
|
},
|
|
({ next, isNextStart }) => {
|
|
it('should handle typescript paths alias correctly', async () => {
|
|
const html = await next.render('/button')
|
|
expect(html).toContain('click</button>')
|
|
})
|
|
|
|
it('should resolve css imports from outside with src folder presented', async () => {
|
|
const browser = await next.browser('/button')
|
|
const fontSize = await browser
|
|
.elementByCss('button')
|
|
.getComputedCss('font-size')
|
|
expect(fontSize).toBe('50px')
|
|
})
|
|
|
|
if (isNextStart) {
|
|
it('should not contain installed react/react-dom version in client chunks', async () => {
|
|
const appBuildManifest = await next.readJSON(
|
|
'.next/app-build-manifest.json'
|
|
)
|
|
Object.keys(appBuildManifest.pages).forEach((page) => {
|
|
const containFrameworkChunk = appBuildManifest.pages[page].some(
|
|
(chunk) => {
|
|
return chunk.includes('framework')
|
|
}
|
|
)
|
|
expect(containFrameworkChunk).toBe(false)
|
|
})
|
|
})
|
|
|
|
it('should generate app-build-manifest correctly', async () => {
|
|
// Remove other page CSS files:
|
|
const manifest = await next.readJSON('.next/app-build-manifest.json')
|
|
|
|
expect(manifest.pages).not.toBeEmptyObject()
|
|
})
|
|
}
|
|
}
|
|
)
|