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
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { createNextDescribe } from 'e2e-utils'
|
|
|
|
createNextDescribe(
|
|
'app-dir - esm js extension',
|
|
{
|
|
files: __dirname,
|
|
},
|
|
({ next }) => {
|
|
it('should be able to render nextjs api in app router', async () => {
|
|
const $ = await next.render$('/app')
|
|
|
|
async function validateDomNodes(selector: string) {
|
|
expect(await $(`${selector} .img`).prop('tagName')).toBe('IMG')
|
|
expect(await $(`${selector} .link`).prop('tagName')).toBe('A')
|
|
expect(await $(`${selector} .unstable_getImgProps`).text()).toContain(
|
|
'function'
|
|
)
|
|
}
|
|
|
|
await validateDomNodes('#with-ext')
|
|
await validateDomNodes('#without-ext')
|
|
|
|
expect($('head link[href="/test-ext.js"]').length).toBe(1)
|
|
expect($('head link[href="/test.js"]').length).toBe(1)
|
|
})
|
|
|
|
it('should be able to use nextjs api in pages router', async () => {
|
|
const $ = await next.render$('/pages')
|
|
|
|
expect(await $('meta[name="head-value-1"]').attr('content')).toBe(
|
|
'with-ext'
|
|
)
|
|
expect(await $('meta[name="head-value-2"]').attr('content')).toBe(
|
|
'without-ext'
|
|
)
|
|
expect(await $('.root').text()).toContain('pages')
|
|
})
|
|
}
|
|
)
|