Remove edge shared deps (vercel#41413)

Since we have already bundled dependencies for server layer, so the shared deps chunk group is not needed anymore. Also changing to esm assets import with next internals for edge function and middleware build. The changes are originally from vercel#41337, try to land them separately.
Kikobeats · Oct 24, 2022 · b8e32d2 · b8e32d2
1 parent dac86bb
commit b8e32d2
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 43 deletions.
diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
@@ -209,7 +209,10 @@ export function getEdgeServerEntry(opts: {
 
   return {
     import: `next-edge-ssr-loader?${stringify(loaderParams)}!`,
-    layer: opts.isServerComponent ? WEBPACK_LAYERS.server : undefined,
+    // The Edge bundle includes the server in its entrypoint, so it has to
+    // be in the SSR layer — we later convert the page request to the RSC layer
+    // via a webpack rule.
+    layer: undefined,
   }
 }
 

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -86,9 +86,6 @@ const BABEL_CONFIG_FILES = [
   'babel.config.cjs',
 ]
 
-const rscSharedRegex =
-  /(node_modules[\\/]react\/|[\\/]shared[\\/]lib[\\/](head-manager-context|router-context|server-inserted-html)\.js|node_modules[\\/]styled-jsx[\\/])/
-
 // Support for NODE_PATH
 const nodePathList = (process.env.NODE_PATH || '')
   .split(process.platform === 'win32' ? ';' : ':')
@@ -1310,39 +1307,18 @@ export default async function getBaseWebpackConfig(
             ...(config.experimental.optimizeCss ? [] : ['critters']),
           ],
     optimization: {
-      // @ts-ignore: TODO remove ts-ignore when webpack 4 is removed
       emitOnErrors: !dev,
       checkWasmTypes: false,
       nodeEnv: false,
       splitChunks: (():
         | Required<webpack.Configuration>['optimization']['splitChunks']
         | false => {
-        // For the edge runtime, we have to bundle all dependencies inside without dynamic `require`s.
-        // To make some dependencies like `react` to be shared between entrypoints, we use a special
-        // cache group here even under dev mode.
-        const edgeRSCCacheGroups = hasServerComponents
-          ? {
-              rscDeps: {
-                enforce: true,
-                name: 'rsc-runtime-deps',
-                filename: 'rsc-runtime-deps.js',
-                test: rscSharedRegex,
-              },
-            }
-          : undefined
-        if (isEdgeServer && edgeRSCCacheGroups) {
-          return {
-            cacheGroups: edgeRSCCacheGroups,
-          }
-        }
-
         if (dev) {
           return false
         }
 
         if (isNodeServer) {
           return {
-            // @ts-ignore
             filename: '[name].js',
             chunks: 'all',
             minSize: 1000,
@@ -1351,11 +1327,8 @@ export default async function getBaseWebpackConfig(
 
         if (isEdgeServer) {
           return {
-            // @ts-ignore
             filename: 'edge-chunks/[name].js',
-            chunks: 'all',
             minChunks: 2,
-            cacheGroups: edgeRSCCacheGroups,
           }
         }
 
@@ -1471,7 +1444,6 @@ export default async function getBaseWebpackConfig(
     },
     context: dir,
     // Kept as function to be backwards compatible
-    // @ts-ignore TODO webpack 5 typings needed
     entry: async () => {
       return {
         ...(clientEntries ? clientEntries : {}),
@@ -1599,6 +1571,17 @@ export default async function getBaseWebpackConfig(
               } as any,
             ]
           : []),
+        ...(hasAppDir && isEdgeServer
+          ? [
+              // The Edge bundle includes the server in its entrypoint, so it has to
+              // be in the SSR layer — here we convert the actual page request to
+              // the RSC layer via a webpack rule.
+              {
+                resourceQuery: /__edge_ssr_entry__/,
+                layer: WEBPACK_LAYERS.server,
+              },
+            ]
+          : []),
         // Alias `next/dynamic` to React.lazy implementation for RSC
         ...(hasServerComponents
           ? [
@@ -1631,16 +1614,6 @@ export default async function getBaseWebpackConfig(
               },
             ]
           : []),
-        ...(hasServerComponents && isEdgeServer
-          ? [
-              // Move shared dependencies from sc_server and sc_client into the
-              // same layer.
-              {
-                test: rscSharedRegex,
-                layer: WEBPACK_LAYERS.rscShared,
-              },
-            ]
-          : []),
         {
           test: /\.(js|cjs|mjs)$/,
           issuerLayer: WEBPACK_LAYERS.api,

diff --git a/packages/next/build/webpack/loaders/next-edge-function-loader.ts b/packages/next/build/webpack/loaders/next-edge-function-loader.ts
@@ -18,7 +18,7 @@ export default function middlewareLoader(this: any) {
   buildInfo.rootDir = rootDir
 
   return `
-        import { adapter, enhanceGlobals } from 'next/dist/server/web/adapter'
+        import { adapter, enhanceGlobals } from 'next/dist/esm/server/web/adapter'
 
         enhanceGlobals()
 

diff --git a/packages/next/build/webpack/loaders/next-edge-ssr-loader/index.ts b/packages/next/build/webpack/loaders/next-edge-ssr-loader/index.ts
@@ -85,7 +85,7 @@ export default async function edgeSSRLoader(this: any) {
   const pageModPath = `${appDirLoader}${stringifiedPagePath.substring(
     1,
     stringifiedPagePath.length - 1
-  )}`
+  )}${isAppDir ? '?__edge_ssr_entry__' : ''}`
 
   const transformed = `
     import { adapter, enhanceGlobals } from 'next/dist/esm/server/web/adapter'

diff --git a/packages/next/build/webpack/loaders/next-middleware-loader.ts b/packages/next/build/webpack/loaders/next-middleware-loader.ts
@@ -40,7 +40,7 @@ export default function middlewareLoader(this: any) {
   buildInfo.rootDir = rootDir
 
   return `
-        import { adapter, blockUnallowedResponse, enhanceGlobals } from 'next/dist/server/web/adapter'
+        import { adapter, blockUnallowedResponse, enhanceGlobals } from 'next/dist/esm/server/web/adapter'
 
         enhanceGlobals()
 

diff --git a/packages/next/lib/constants.ts b/packages/next/lib/constants.ts
@@ -73,7 +73,6 @@ export const WEBPACK_LAYERS = {
   server: 'sc_server',
   client: 'sc_client',
   api: 'api',
-  rscShared: 'rsc_shared_deps',
   middleware: 'middleware',
   edgeAsset: 'edge-asset',
 }