Fix chunk file names in flight manifest (vercel#48583)

This PR corrects the file names of chunks in the flight manifest.
Previously we assume that the chunk file is always named as
`(requiredChunk.name || requiredChunk.id) + '-' + requiredChunk.hash`
and located in `static/chunks`. This isn't always true (see the comment)
especially when a chunk was generated via `import()`. Another mistake
was that we assume that one chunk only generates one file, but it's
actually possible that it depends on multiple files.

This should address many of the "Chunk failed to load" errors.

Closes [vercel#47173](vercel#47173), fixes
NEXT-847
fix vercel#47173

Author: shuding

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

@@ -135,7 +135,6 @@ export class ClientReferenceManifestPlugin {
       cssFiles: {},
       clientModules: {},
     }
-    const dev = this.dev
 
     const clientRequestsSet = new Set()
 
@@ -256,13 +255,18 @@ export class ClientReferenceManifestPlugin {
                 return null
               }
 
-              return (
-                requiredChunk.id +
-                ':' +
-                (requiredChunk.name || requiredChunk.id) +
-                (dev ? '' : '-' + requiredChunk.hash)
-              )
+              // Get the actual chunk file names from the chunk file list.
+              // It's possible that the chunk is generated via `import()`, in
+              // that case the chunk file name will be '[name].[contenthash]'
+              // instead of '[name]-[chunkhash]'.
+              return [...requiredChunk.files].map((file) => {
+                // It's possible that a chunk also emits CSS files, that will
+                // be handled separatedly.
+                if (!file.endsWith('.js')) return null
+                return requiredChunk.id + ':' + file
+              })
             })
+            .flat()
             .filter(nonNullable)
         }
         const requiredChunks = getAppPathRequiredChunks()

packages/next/src/client/app-index.tsx

@@ -69,8 +69,8 @@ self.__next_require__ =
 // eslint-disable-next-line no-undef
 ;(self as any).__next_chunk_load__ = (chunk: string) => {
   if (!chunk) return Promise.resolve()
-  const [chunkId, chunkFileName] = chunk.split(':')
-  chunkFilenameMap[chunkId] = `static/chunks/${chunkFileName}.js`
+  const [chunkId, chunkFilePath] = chunk.split(':')
+  chunkFilenameMap[chunkId] = chunkFilePath
 
   // @ts-ignore
   // eslint-disable-next-line no-undef