From 57946409e7a5e9b828d3882e736255b3ca1ddb0d Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 21 Nov 2022 23:15:55 +0100
Subject: [PATCH] Alias esm next document to avoid mismatch react context
 (#43192)

<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

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`
---
 packages/next/build/webpack-config.ts | 11 ++++++---
 test/e2e/streaming-ssr/index.test.ts  | 32 +++++++++++++++++++++++++--
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index aaa3821d304a7..6e09c85cb558c 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -831,6 +831,7 @@ 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) => {
@@ -838,7 +839,7 @@ export default async function getBaseWebpackConfig(
             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
index 958bec7e0a5c9..9f500fa2a17c5 100644
--- 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