Alias all client, shared, pages dist assets for esm (vercel#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.
augustng-dev · Sep 29, 2022 · 79a85b7 · 79a85b7
1 parent 26a23e9
commit 79a85b7
Show file tree

Hide file tree

Showing 18 changed files with 46 additions and 77 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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