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

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/shared/lib/amp')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/shared/lib/amp')
-    : require('./dist/shared/lib/amp')

packages/next/app.js

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/pages/_app')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/pages/_app')
-    : require('./dist/pages/_app')

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
           }
 

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/pages/_error.js',
-        ? 'next/dist/esm/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/pages/_document.js',
-        ? `next/dist/esm/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,

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 AppRouter = require('next/dist/client/components/app-router.client.js').default
-    export const LayoutRouter = require('${rootDistFolder}/client/components/layout-router.client.js').default
+    export const LayoutRouter = require('next/dist/client/components/layout-router.client.js').default
-    export const RenderFromTemplateContext = require('${rootDistFolder}/client/components/render-from-template-context.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 staticGenerationAsyncStorage = require('next/dist/client/components/static-generation-async-storage.js').staticGenerationAsyncStorage
-    export const requestAsyncStorage = require('${rootDistFolder}/client/components/request-async-storage.js').requestAsyncStorage
+    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__

packages/next/client.js

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/client/index')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/client/index')
-    : require('./dist/client/index')

packages/next/config.js

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/shared/lib/runtime-config')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/shared/lib/runtime-config')
-    : require('./dist/shared/lib/runtime-config')

packages/next/constants.js

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/shared/lib/constants')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/shared/lib/constants')
-    : require('./dist/shared/lib/constants')

packages/next/document.js

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/pages/_document')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/pages/_document')
-    : require('./dist/pages/_document')

packages/next/dynamic.js

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/shared/lib/dynamic')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/shared/lib/dynamic')
-    : require('./dist/shared/lib/dynamic')

packages/next/error.js

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/pages/_error')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/pages/_error')
-    : require('./dist/pages/_error')

packages/next/head.js

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/shared/lib/head')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/shared/lib/head')
-    : require('./dist/shared/lib/head')

packages/next/image.js

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/client/image')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/client/image')
-    : require('./dist/client/image')

packages/next/link.js

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/client/link')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/client/link')
-    : require('./dist/client/link')

packages/next/router.js

@@ -1,4 +1 @@
-module.exports =
+module.exports = require('./dist/client/router')
-  process.env.NEXT_RUNTIME === 'edge'
-    ? require('./dist/esm/client/router')
-    : require('./dist/client/router')

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,

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',
+}

test/e2e/switchable-runtime/pages/app.js.txt

@@ -1,7 +0,0 @@
-export default function App({ Component, pageProps }) {
-  return (
-    <div className="app-client-root">
-      <Component {...pageProps} />
-    </div>
-  )
-}