Resolve next api for layouts to esm for edge runtime (#43302)
The edge runtime should all use esm assets to keep the hooks and the react context are matched Fixes: #43080 The issue is caused by the app router context and server inserted html context are not aligned. One side is using esm and other side is using the cjs asset. ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
This commit is contained in:
parent
e901feffc3
commit
e581dc81dd
3 changed files with 28 additions and 11 deletions
|
@ -884,16 +884,6 @@ export default async function getBaseWebpackConfig(
|
|||
// let this alias hit before `next` alias.
|
||||
...(isEdgeServer
|
||||
? {
|
||||
// app-router-context can not be ESM and CJS so force CJS
|
||||
'next/dist/shared/lib/app-router-context': path.join(
|
||||
__dirname,
|
||||
'../dist/shared/lib/app-router-context.js'
|
||||
),
|
||||
'next/dist/client/components': path.join(
|
||||
__dirname,
|
||||
'../client/components'
|
||||
),
|
||||
|
||||
'next/dist/client': 'next/dist/esm/client',
|
||||
'next/dist/shared': 'next/dist/esm/shared',
|
||||
'next/dist/pages': 'next/dist/esm/pages',
|
||||
|
@ -916,6 +906,10 @@ export default async function getBaseWebpackConfig(
|
|||
'next/dist/esm/pages/_document',
|
||||
[require.resolve('next/dist/pages/_app')]:
|
||||
'next/dist/esm/pages/_app',
|
||||
[require.resolve('next/dist/client/components/navigation')]:
|
||||
'next/dist/client/components/navigation',
|
||||
[require.resolve('next/dist/client/components/headers')]:
|
||||
'next/dist/client/components/headers',
|
||||
}
|
||||
: undefined),
|
||||
|
||||
|
|
|
@ -273,7 +273,7 @@ describe('app dir - rsc basics', () => {
|
|||
expect(content).toContain('bar.server.js:')
|
||||
})
|
||||
|
||||
it('should render initial styles of css-in-js in SSR correctly', async () => {
|
||||
it('should render initial styles of css-in-js in nodejs SSR correctly', async () => {
|
||||
const html = await renderViaHTTP(next.url, '/css-in-js')
|
||||
const head = getNodeBySelector(html, 'head').html()
|
||||
|
||||
|
@ -285,6 +285,18 @@ describe('app dir - rsc basics', () => {
|
|||
expect(head).toMatch(/{color:(\s*)blue;?}/)
|
||||
})
|
||||
|
||||
it('should render initial styles of css-in-js in edge SSR correctly', async () => {
|
||||
const html = await renderViaHTTP(next.url, '/css-in-js/edge')
|
||||
const head = getNodeBySelector(html, 'head').html()
|
||||
|
||||
// from styled-jsx
|
||||
expect(head).toMatch(/{color:(\s*)purple;?}/) // styled-jsx/style
|
||||
expect(head).toMatch(/{color:(\s*)hotpink;?}/) // styled-jsx/css
|
||||
|
||||
// from styled-components
|
||||
expect(head).toMatch(/{color:(\s*)blue;?}/)
|
||||
})
|
||||
|
||||
it('should render css-in-js suspense boundary correctly', async () => {
|
||||
await fetchViaHTTP(next.url, '/css-in-js/suspense', null, {}).then(
|
||||
async (response) => {
|
||||
|
|
11
test/e2e/app-dir/rsc-basic/app/css-in-js/edge/page.js
Normal file
11
test/e2e/app-dir/rsc-basic/app/css-in-js/edge/page.js
Normal file
|
@ -0,0 +1,11 @@
|
|||
import Comp from '../styled-jsx'
|
||||
import StyledComp from '../styled-components'
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div>
|
||||
<Comp />
|
||||
<StyledComp />
|
||||
</div>
|
||||
)
|
||||
}
|
Loading…
Reference in a new issue