Add updated de-duping logic for next/dynamic (#7705)

packages/next-server/lib/utils.ts

@@ -2,7 +2,7 @@ import { format, UrlObject, URLFormatOptions } from 'url'
 import { ServerResponse, IncomingMessage } from 'http'
 import { ComponentType } from 'react'
 import { ParsedUrlQuery } from 'querystring'
-import { ManifestItem } from '../server/get-dynamic-import-bundles'
+import { ManifestItem } from '../server/render'
 import { BaseRouter } from './router/router'
 
 /**

packages/next-server/server/get-dynamic-import-bundles.ts

-export type ManifestItem = {
-  id: number | string
-  name: string
-  file: string
-  publicPath: string
-}
-
-export type Manifest = { [moduleId: string]: ManifestItem[] }
-
-type DynamicImportBundles = Set<ManifestItem>
-
-// Based on https://github.com/jamiebuilds/react-loadable/pull/132
-export function getDynamicImportBundles(
-  manifest: Manifest,
-  moduleIds: string[]
-): DynamicImportBundles {
-  return moduleIds.reduce(
-    (bundles: DynamicImportBundles, moduleId: string): DynamicImportBundles => {
-      if (typeof manifest[moduleId] === 'undefined') {
-        return bundles
-      }
-
-      manifest[moduleId].map(item => bundles.add(item))
-      return bundles
-    },
-    new Set()
-  )
-}

packages/next-server/server/render.tsx

@@ -24,17 +24,21 @@ import { RequestContext } from '../lib/request-context'
 import { LoadableContext } from '../lib/loadable-context'
 import { RouterContext } from '../lib/router-context'
 import { DataManager } from '../lib/data-manager'
-import {
-  ManifestItem,
-  getDynamicImportBundles,
-  Manifest as ReactLoadableManifest,
-} from './get-dynamic-import-bundles'
 import { getPageFiles, BuildManifest } from './get-page-files'
 import { AmpStateContext } from '../lib/amp-context'
 import optimizeAmp from './optimize-amp'
 import { isInAmpMode } from '../lib/amp'
 import { IPageConfig } from './load-components'
 
+export type ManifestItem = {
+  id: number | string
+  name: string
+  file: string
+  publicPath: string
+}
+
+type ReactLoadableManifest = { [moduleId: string]: ManifestItem[] }
+
 function noRouter() {
   const message =
     'No router instance found. you should only use "next/router" inside the client side of your app. https://err.sh/zeit/next.js/no-router-instance'
@@ -468,12 +472,21 @@ export async function renderToHTML(
     return dataManagerData
   }
 
-  const dynamicImports = [
-    ...getDynamicImportBundles(reactLoadableManifest, reactLoadableModules),
-  ]
-  const dynamicImportsIds: any = [
-    ...new Set(dynamicImports.map(bundle => bundle.id)),
-  ]
+  const dynamicImportIdsSet = new Set<string>()
+  const dynamicImports: ManifestItem[] = []
+
+  for (const mod of reactLoadableModules) {
+    const manifestItem = reactLoadableManifest[mod]
+
+    if (manifestItem) {
+      manifestItem.map(item => {
+        dynamicImports.push(item)
+        dynamicImportIdsSet.add(item.id as string)
+      })
+    }
+  }
+
+  const dynamicImportsIds = [...dynamicImportIdsSet]
   const inAmpMode = isInAmpMode(ampState)
   const hybridAmp = ampState.hybrid
 

packages/next/build/webpack/plugins/react-loadable-plugin.ts

@@ -61,6 +61,15 @@ function buildManifest(
               manifest[request] = []
             }
 
+            // Avoid duplicate files
+            if (
+              manifest[request].some(
+                item => item.id === id && item.file === file
+              )
+            ) {
+              continue
+            }
+
             manifest[request].push({
               id,
               name,