From 79a85b73ad7aca2228662400dfe6ed9169e138fb Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Thu, 29 Sep 2022 23:24:04 +0200
Subject: [PATCH] Alias all client, shared, pages dist assets for esm (#41034)

Alias all existing imports from `next/dist/..` to `next/dist/esm` for edge compiler. So that we don't need checking for `process.env.NEXT_RUNTIME === 'edge'` or passing down `nextRuntime` to decide wether the esm or cjs asset to require

This will also fix the issue that some layouts hook are been included twice into the bundle with cjs and esm bundle in edge runtime, now only esm chunk will be bundled in server.
---
 packages/next/amp.js                          |  5 +----
 packages/next/app.js                          |  5 +----
 packages/next/build/entries.ts                |  3 ---
 packages/next/build/webpack-config.ts         | 20 ++++++++++++-------
 .../build/webpack/loaders/next-app-loader.ts  | 18 ++++++++---------
 packages/next/client.js                       |  5 +----
 packages/next/config.js                       |  5 +----
 packages/next/constants.js                    |  5 +----
 packages/next/document.js                     |  5 +----
 packages/next/dynamic.js                      |  5 +----
 packages/next/error.js                        |  5 +----
 packages/next/head.js                         |  5 +----
 packages/next/image.js                        |  5 +----
 packages/next/link.js                         |  5 +----
 packages/next/router.js                       |  5 +----
 packages/next/server/dev/hot-reloader.ts      |  2 --
 .../app-dir/app-edge/app/app-edge/layout.tsx  | 13 ++++++++++++
 test/e2e/switchable-runtime/pages/app.js.txt  |  7 -------
 18 files changed, 46 insertions(+), 77 deletions(-)
 create mode 100644 test/e2e/app-dir/app-edge/app/app-edge/layout.tsx
 delete mode 100644 test/e2e/switchable-runtime/pages/app.js.txt

diff --git a/packages/next/amp.js b/packages/next/amp.js
index 882ccb799815c..9c3c257022d4b 100644
--- a/packages/next/amp.js
+++ b/packages/next/amp.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/shared/lib/amp')
-    : require('./dist/shared/lib/amp')
+module.exports = require('./dist/shared/lib/amp')
diff --git a/packages/next/app.js b/packages/next/app.js
index b51ec15930da2..5437bb67ccd1b 100644
--- a/packages/next/app.js
+++ b/packages/next/app.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/pages/_app')
-    : require('./dist/pages/_app')
+module.exports = require('./dist/pages/_app')
diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
index 2419462029a6c..6b0a6e0a39025 100644
--- a/packages/next/build/entries.ts
+++ b/packages/next/build/entries.ts
@@ -219,7 +219,6 @@ export function getAppEntry(opts: {
   appDir: string
   appPaths: string[] | null
   pageExtensions: string[]
-  nextRuntime: string
 }) {
   return {
     import: `next-app-loader?${stringify(opts)}!`,
@@ -456,7 +455,6 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
               appDir,
               appPaths: matchedAppPaths,
               pageExtensions,
-              nextRuntime: 'nodejs',
             })
           } else if (isTargetLikeServerless(target)) {
             if (page !== '/_app' && page !== '/_document') {
@@ -481,7 +479,6 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
               appDir: appDir!,
               appPaths: matchedAppPaths,
               pageExtensions,
-              nextRuntime: 'edge',
             }).import
           }
 
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 31beb8be6054e..d0b535327ac2d 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -788,7 +788,7 @@ export default async function getBaseWebpackConfig(
             return prev
           }, [] as string[])
         : []),
-      isEdgeServer ? 'next/dist/esm/pages/_app.js' : 'next/dist/pages/_app.js',
+      'next/dist/pages/_app.js',
     ]
     customAppAliases[`${PAGES_DIR_ALIAS}/_error`] = [
       ...(pagesDir
@@ -797,9 +797,7 @@ export default async function getBaseWebpackConfig(
             return prev
           }, [] as string[])
         : []),
-      isEdgeServer
-        ? 'next/dist/esm/pages/_error.js'
-        : 'next/dist/pages/_error.js',
+      'next/dist/pages/_error.js',
     ]
     customDocumentAliases[`${PAGES_DIR_ALIAS}/_document`] = [
       ...(pagesDir
@@ -808,9 +806,7 @@ export default async function getBaseWebpackConfig(
             return prev
           }, [] as string[])
         : []),
-      isEdgeServer
-        ? `next/dist/esm/pages/_document.js`
-        : `next/dist/pages/_document.js`,
+      'next/dist/pages/_document.js',
     ]
   }
 
@@ -830,6 +826,16 @@ export default async function getBaseWebpackConfig(
       ...nodePathList, // Support for NODE_PATH environment variable
     ],
     alias: {
+      // Alias next/dist imports to next/dist/esm assets,
+      // let this alias hit before `next` alias.
+      ...(isEdgeServer
+        ? {
+            'next/dist/client': 'next/dist/esm/client',
+            'next/dist/shared': 'next/dist/esm/shared',
+            'next/dist/pages': 'next/dist/esm/pages',
+          }
+        : undefined),
+
       next: NEXT_PROJECT_ROOT,
 
       react: reactDir,
diff --git a/packages/next/build/webpack/loaders/next-app-loader.ts b/packages/next/build/webpack/loaders/next-app-loader.ts
index dd6cb13134617..473ded83103b4 100644
--- a/packages/next/build/webpack/loaders/next-app-loader.ts
+++ b/packages/next/build/webpack/loaders/next-app-loader.ts
@@ -120,9 +120,8 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
   appDir: string
   appPaths: string[] | null
   pageExtensions: string[]
-  nextRuntime: string
 }> = async function nextAppLoader() {
-  const { name, appDir, appPaths, pagePath, pageExtensions, nextRuntime } =
+  const { name, appDir, appPaths, pagePath, pageExtensions } =
     this.getOptions() || {}
 
   const buildInfo = getModuleBuildInfo((this as any)._module)
@@ -180,24 +179,23 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
     resolveParallelSegments,
   })
 
-  const rootDistFolder = nextRuntime === 'edge' ? 'next/dist/esm' : 'next/dist'
   const result = `
     export ${treeCode}
 
-    export const AppRouter = require('${rootDistFolder}/client/components/app-router.client.js').default
-    export const LayoutRouter = require('${rootDistFolder}/client/components/layout-router.client.js').default
-    export const RenderFromTemplateContext = require('${rootDistFolder}/client/components/render-from-template-context.client.js').default
+    export const AppRouter = require('next/dist/client/components/app-router.client.js').default
+    export const LayoutRouter = require('next/dist/client/components/layout-router.client.js').default
+    export const RenderFromTemplateContext = require('next/dist/client/components/render-from-template-context.client.js').default
     export const HotReloader = ${
       // Disable HotReloader component in production
       this.mode === 'development'
-        ? `require('${rootDistFolder}/client/components/hot-reloader.client.js').default`
+        ? `require('next/dist/client/components/hot-reloader.client.js').default`
         : 'null'
     }
 
-    export const staticGenerationAsyncStorage = require('${rootDistFolder}/client/components/static-generation-async-storage.js').staticGenerationAsyncStorage
-    export const requestAsyncStorage = require('${rootDistFolder}/client/components/request-async-storage.js').requestAsyncStorage
+    export const staticGenerationAsyncStorage = require('next/dist/client/components/static-generation-async-storage.js').staticGenerationAsyncStorage
+    export const requestAsyncStorage = require('next/dist/client/components/request-async-storage.js').requestAsyncStorage
 
-    export const serverHooks = require('${rootDistFolder}/client/components/hooks-server-context.js')
+    export const serverHooks = require('next/dist/client/components/hooks-server-context.js')
 
     export const renderToReadableStream = require('next/dist/compiled/react-server-dom-webpack/writer.browser.server').renderToReadableStream
     export const __next_app_webpack_require__ = __webpack_require__
diff --git a/packages/next/client.js b/packages/next/client.js
index 3f049f0bd0420..ff71a4ae0c8f1 100644
--- a/packages/next/client.js
+++ b/packages/next/client.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/client/index')
-    : require('./dist/client/index')
+module.exports = require('./dist/client/index')
diff --git a/packages/next/config.js b/packages/next/config.js
index bc591fa891565..2da980d8b0065 100644
--- a/packages/next/config.js
+++ b/packages/next/config.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/shared/lib/runtime-config')
-    : require('./dist/shared/lib/runtime-config')
+module.exports = require('./dist/shared/lib/runtime-config')
diff --git a/packages/next/constants.js b/packages/next/constants.js
index cea2032c0f568..6e690109937c5 100644
--- a/packages/next/constants.js
+++ b/packages/next/constants.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/shared/lib/constants')
-    : require('./dist/shared/lib/constants')
+module.exports = require('./dist/shared/lib/constants')
diff --git a/packages/next/document.js b/packages/next/document.js
index 22296a77bb16a..5741035f38add 100644
--- a/packages/next/document.js
+++ b/packages/next/document.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/pages/_document')
-    : require('./dist/pages/_document')
+module.exports = require('./dist/pages/_document')
diff --git a/packages/next/dynamic.js b/packages/next/dynamic.js
index e9848e7f0dc1e..e2956e5f40337 100644
--- a/packages/next/dynamic.js
+++ b/packages/next/dynamic.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/shared/lib/dynamic')
-    : require('./dist/shared/lib/dynamic')
+module.exports = require('./dist/shared/lib/dynamic')
diff --git a/packages/next/error.js b/packages/next/error.js
index 653e9316b7799..899cd04662710 100644
--- a/packages/next/error.js
+++ b/packages/next/error.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/pages/_error')
-    : require('./dist/pages/_error')
+module.exports = require('./dist/pages/_error')
diff --git a/packages/next/head.js b/packages/next/head.js
index 69e6800ae14ca..71758fdbeaa5c 100644
--- a/packages/next/head.js
+++ b/packages/next/head.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/shared/lib/head')
-    : require('./dist/shared/lib/head')
+module.exports = require('./dist/shared/lib/head')
diff --git a/packages/next/image.js b/packages/next/image.js
index eae3690cd153a..a1de5ad69891a 100644
--- a/packages/next/image.js
+++ b/packages/next/image.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/client/image')
-    : require('./dist/client/image')
+module.exports = require('./dist/client/image')
diff --git a/packages/next/link.js b/packages/next/link.js
index d3c35c1ca5731..a37307be2e738 100644
--- a/packages/next/link.js
+++ b/packages/next/link.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/client/link')
-    : require('./dist/client/link')
+module.exports = require('./dist/client/link')
diff --git a/packages/next/router.js b/packages/next/router.js
index 9b8d7bbbe2183..afdc8f9ad2eb6 100644
--- a/packages/next/router.js
+++ b/packages/next/router.js
@@ -1,4 +1 @@
-module.exports =
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/client/router')
-    : require('./dist/client/router')
+module.exports = require('./dist/client/router')
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index 6a92fe1a1ddf7..cdf1c7c00904a 100644
--- a/packages/next/server/dev/hot-reloader.ts
+++ b/packages/next/server/dev/hot-reloader.ts
@@ -626,7 +626,6 @@ export default class HotReloader {
                         ),
                         appDir: this.appDir!,
                         pageExtensions: this.config.pageExtensions,
-                        nextRuntime: 'edge',
                       }).import
                     : undefined
 
@@ -706,7 +705,6 @@ export default class HotReloader {
                           ),
                           appDir: this.appDir!,
                           pageExtensions: this.config.pageExtensions,
-                          nextRuntime: 'nodejs',
                         })
                       : relativeRequest,
                   appDir: this.config.experimental.appDir,
diff --git a/test/e2e/app-dir/app-edge/app/app-edge/layout.tsx b/test/e2e/app-dir/app-edge/app/app-edge/layout.tsx
new file mode 100644
index 0000000000000..3715b9398be5a
--- /dev/null
+++ b/test/e2e/app-dir/app-edge/app/app-edge/layout.tsx
@@ -0,0 +1,13 @@
+'client'
+
+import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  // useSelectedLayoutSegment should not be thrown
+  useSelectedLayoutSegment()
+  return children
+}
+
+export const config = {
+  runtime: 'experimental-edge',
+}
diff --git a/test/e2e/switchable-runtime/pages/app.js.txt b/test/e2e/switchable-runtime/pages/app.js.txt
deleted file mode 100644
index 57b0da8210940..0000000000000
--- a/test/e2e/switchable-runtime/pages/app.js.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function App({ Component, pageProps }) {
-  return (
-    <div className="app-client-root">
-      <Component {...pageProps} />
-    </div>
-  )
-}