Alias esm next document to avoid mismatch react context (#43192)

When using custom document and importing from `next/document`, `HtmlContext` instance will mismatch due to CJS version of `next/document` is consumed. Gotta alias it to the ESM version for edge runtime ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md`
vercel · Nov 21, 2022 · 8690395 · 8690395
1 parent 2763f60
commit 8690395
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -831,14 +831,15 @@ export default async function getBaseWebpackConfig(
   const customRootAliases: { [key: string]: string[] } = {}
 
   if (dev) {
+    const nextDist = 'next/dist/' + (isEdgeServer ? 'esm/' : '')
     customAppAliases[`${PAGES_DIR_ALIAS}/_app`] = [
       ...(pagesDir
         ? pageExtensions.reduce((prev, ext) => {
             prev.push(path.join(pagesDir, `_app.${ext}`))
             return prev
           }, [] as string[])
         : []),
-      'next/dist/pages/_app.js',
+      `${nextDist}pages/_app.js`,
     ]
     customAppAliases[`${PAGES_DIR_ALIAS}/_error`] = [
       ...(pagesDir
@@ -847,7 +848,7 @@ export default async function getBaseWebpackConfig(
             return prev
           }, [] as string[])
         : []),
-      'next/dist/pages/_error.js',
+      `${nextDist}pages/_error.js`,
     ]
     customDocumentAliases[`${PAGES_DIR_ALIAS}/_document`] = [
       ...(pagesDir
@@ -856,7 +857,7 @@ export default async function getBaseWebpackConfig(
             return prev
           }, [] as string[])
         : []),
-      'next/dist/pages/_document.js',
+      `${nextDist}pages/_document.js`,
     ]
   }
 
@@ -908,6 +909,10 @@ export default async function getBaseWebpackConfig(
               'next/dist/esm/shared/lib/head',
             [require.resolve('next/dist/shared/lib/dynamic')]:
               'next/dist/esm/shared/lib/dynamic',
+            [require.resolve('next/dist/pages/_document')]:
+              'next/dist/esm/pages/_document',
+            [require.resolve('next/dist/pages/_app')]:
+              'next/dist/esm/pages/_app',
           }
         : undefined),
 

diff --git a/test/e2e/streaming-ssr/index.test.ts b/test/e2e/streaming-ssr/index.test.ts
@@ -2,6 +2,7 @@ import { join } from 'path'
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
 import {
+  check,
   fetchViaHTTP,
   findPort,
   initNextServerScript,
@@ -16,7 +17,7 @@ const react18Deps = {
 
 const isNextProd = !(global as any).isNextDev && !(global as any).isNextDeploy
 
-describe('react 18 streaming SSR with custom next configs', () => {
+describe('streaming SSR with custom next configs', () => {
   let next: NextInstance
 
   beforeAll(async () => {
@@ -74,10 +75,37 @@ describe('react 18 streaming SSR with custom next configs', () => {
     const html = await renderViaHTTP(next.url, '/multi-byte')
     expect(html).toContain('マルチバイト'.repeat(28))
   })
+
+  if ((global as any).isNextDev) {
+    it('should work with custom document', async () => {
+      await next.patchFile(
+        'pages/_document.js',
+        `
+        import { Html, Head, Main, NextScript } from 'next/document'
+
+        export default function Document() {
+          return (
+            <Html>
+              <Head />
+              <body>
+                <Main />
+                <NextScript />
+              </body>
+            </Html>
+          )
+        }
+      `
+      )
+      await check(async () => {
+        return await renderViaHTTP(next.url, '/')
+      }, /index/)
+      await next.deleteFile('pages/_document.js')
+    })
+  }
 })
 
 if (isNextProd) {
-  describe('react 18 streaming SSR with custom server', () => {
+  describe('streaming SSR with custom server', () => {
     let next
     let server
     let appPort