Fix modern + granularChunk hydration failing (#9727)

* Adding native-url package

* Bumping native-url version

* Upgrading native-url

* Logging stats object for debugging

* Logging stats object for debugging

* Adding try catch to the error lines

* Experimenting with regex

* Experimenting with regex

* Experimenting with regex

* Testing regex changes

* Fixing defer-script test case to not include polyfill.js

* Meging changes with existing polyfill work

* Bumping version

* adjust webpack config

* Reduce size in size test

* Remove 1kb from legacy

* Bumping native-url version, includes fix for IE11

* Update lock file

* Updating native-url, fixes issue on IE11

* Fix sourcemap being added in document

* Adding Router as an app level dep. Fixes Router not being added as a dep to pages without Link when granularChunks is enabled

* Fix typescript error

* Fix modern + granularChunks hydration failing

* Fix TS error

* Update native-url version
Co-authored-by: NTim Neutkens <tim@timneutkens.nl>
Co-authored-by: NJJ Kasper <jj@jjsweb.site>
Co-authored-by: NJoe Haddad <timer150@gmail.com>

packages/next/build/webpack/plugins/next-esm-plugin.ts

@@ -213,22 +213,30 @@ export default class NextEsmPlugin implements Plugin {
       compilation.namedChunkGroups
     )
 
+    const unnamedChunks: compilation.Chunk[] = []
     const childChunkFileMap = childCompilation.chunks.reduce(
       (
         chunkMap: { [key: string]: compilation.Chunk },
         chunk: compilation.Chunk
       ) => {
-        chunkMap[chunk.name] = chunk
+        // Dynamic chunks may not have a name. It'll be null in such cases
+        if (chunk.name === null) {
+          unnamedChunks.push(chunk)
+        } else {
+          chunkMap[chunk.name] = chunk
+        }
+
         return chunkMap
       },
       {}
     )
 
-    // Merge files from similar chunks
+    // Merge chunks - merge the files of chunks with the same name
     compilation.chunks.forEach((chunk: compilation.Chunk) => {
       const childChunk = childChunkFileMap[chunk.name]
 
-      if (childChunk?.files) {
+      // Do not merge null named chunks since they are different
+      if (chunk.name !== null && childChunk?.files) {
         delete childChunkFileMap[chunk.name]
         chunk.files.push(
           ...childChunk.files.filter((v: any) => !chunk.files.includes(v))
@@ -236,15 +244,22 @@ export default class NextEsmPlugin implements Plugin {
       }
     })
 
-    // Add modern only chunks
-    compilation.chunks.push(...Object.values(childChunkFileMap))
+    // Add modern only chunks into the main compilation
+    compilation.chunks.push(
+      ...Object.values(childChunkFileMap),
+      ...unnamedChunks
+    )
 
-    // Place modern only chunk inside the right entry point
+    // Place modern only (unmerged) chunks inside the right entry point
     compilation.entrypoints.forEach((entryPoint, entryPointName) => {
       const childEntryPoint = childCompilation.entrypoints.get(entryPointName)
 
       childEntryPoint.chunks.forEach((chunk: compilation.Chunk) => {
-        if (childChunkFileMap.hasOwnProperty(chunk.name)) {
+        if (
+          // Add null named dynamic chunks since they weren't merged
+          chunk.name === null ||
+          childChunkFileMap.hasOwnProperty(chunk.name)
+        ) {
           entryPoint.chunks.push(chunk)
         }
       })