Use customized chunk loading implementation

packages/next/build/webpack-config.ts

@@ -1017,7 +1017,6 @@ export default async function getBaseWebpackConfig(
         ? {
             // We have to use the names here instead of hashes to ensure the consistency between compilers.
             moduleIds: 'named',
-            chunkIds: 'named',
           }
         : {}),
       splitChunks: ((): webpack.Options.SplitChunksOptions | false => {
@@ -1184,7 +1183,7 @@ export default async function getBaseWebpackConfig(
             ? `[name].js`
             : `../[name].js`
           : `static/chunks/${isDevFallback ? 'fallback/' : ''}[name]${
-              dev ? '' : viewsDir ? '' : '-[contenthash]'
+              dev ? '' : viewsDir ? '-[chunkhash]' : '-[contenthash]'
             }.js`,
       library: isClient || isEdgeServer ? '_N_E' : undefined,
       libraryTarget: isClient || isEdgeServer ? 'assign' : 'commonjs2',

packages/next/build/webpack/plugins/flight-manifest-plugin.ts

@@ -67,6 +67,7 @@ export class FlightManifestPlugin {
   createAsset(assets: any, compilation: any) {
     const manifest: any = {}
     const viewsDir = this.viewsDir
+    const dev = this.dev
 
     compilation.chunkGroups.forEach((chunkGroup: any) => {
       function recordModule(chunk: any, id: string, mod: any) {
@@ -102,7 +103,13 @@ export class FlightManifestPlugin {
             moduleExports[name] = {
               id: id.replace(/^\(sc_server\)\//, ''),
               name,
-              chunks: viewsDir ? chunk.ids : [],
+              chunks: viewsDir
+                ? chunk.ids.map((chunkId: string) => {
+                    return (
+                      chunkId + ':' + chunk.name + (dev ? '' : '-' + chunk.hash)
+                    )
+                  })
+                : [],
             }
           }
         })

packages/next/client/views-next.js

@@ -10,10 +10,21 @@ window.next = {
 
 // eslint-disable-next-line no-undef
 const getChunkScriptFilename = __webpack_require__.u
+const chunkFilenameMap = {}
 
 // eslint-disable-next-line no-undef
 __webpack_require__.u = (chunkId) => {
-  return getChunkScriptFilename(chunkId) || `static/chunks/${chunkId}.js`
+  return getChunkScriptFilename(chunkId) || chunkFilenameMap[chunkId]
+}
+
+// eslint-disable-next-line no-undef
+globalThis.__next_chunk_load__ = (chunk) => {
+  const [chunkId, chunkFileName] = chunk.split(':')
+  chunkFilenameMap[chunkId] = `static/chunks/${chunkFileName}.js`
+
+  // @ts-ignore
+  // eslint-disable-next-line no-undef
+  return __webpack_chunk_load__(chunkId)
 }
 
 hydrate()

packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js

@@ -52,7 +52,7 @@ function preloadModule(moduleData) {
     var entry = chunkCache.get(chunkId);
 
     if (entry === undefined) {
-      var thenable = __webpack_chunk_load__(chunkId);
+      var thenable = globalThis.__next_chunk_load__(chunkId);
 
       var resolve = chunkCache.set.bind(chunkCache, chunkId, null);
       var reject = chunkCache.set.bind(chunkCache, chunkId);

packages/next/server/render.tsx

@@ -487,7 +487,7 @@ export async function renderToHTML(
     globalThis.__webpack_require__ =
       ComponentMod.__next_rsc__.__webpack_require__
     // @ts-ignore
-    globalThis.__webpack_chunk_load__ = () => Promise.resolve()
+    globalThis.__next_chunk_load__ = () => Promise.resolve()
 
     Component = createServerComponentRenderer(Component, {
       cachePrefix: pathname + (search ? `?${search}` : ''),

packages/next/server/view-render.tsx

@@ -168,7 +168,7 @@ function createServerComponentRenderer(
       : ComponentMod.__next_rsc__.__webpack_require__
 
     // @ts-ignore
-    globalThis.__webpack_chunk_load__ = () => Promise.resolve()
+    globalThis.__next_chunk_load__ = () => Promise.resolve()
   }
 
   const writable = transformStream.writable

packages/next/taskfile.js

@@ -1274,14 +1274,22 @@ export async function copy_react_server_dom_webpack(task, opts) {
   await task
     .source(require.resolve('react-server-dom-webpack'))
     .target('compiled/react-server-dom-webpack')
-
   await task
     .source(
       join(
         dirname(require.resolve('react-server-dom-webpack')),
         'cjs/react-server-dom-webpack.*'
       )
     )
+    // eslint-disable-next-line require-yield
+    .run({ every: true }, function* (file) {
+      const source = file.data.toString()
+      // We replace the chunk loading code with our own implementaion in Next.js.
+      file.data = source.replace(
+        /__webpack_chunk_load__/g,
+        'globalThis.__next_chunk_load__'
+      )
+    })
     .target('compiled/react-server-dom-webpack/cjs')
 
   await task