Fix duplicate dynamic chunks (#7425)

packages/next/pages/_document.tsx

@@ -24,6 +24,18 @@ export type DocumentComponentContext = {
 
 export async function middleware({req, res}: DocumentContext) {}
 
+function dedupe(bundles: any[]): any[] {
+  const files = new Set()
+  const kept = []
+
+  for (const bundle of bundles) {
+    if (files.has(bundle.file)) continue
+    files.add(bundle.file)
+    kept.push(bundle)
+  }
+  return kept
+}
+
 /**
  * `Document` component handles the initial `document` markup and renders only on the server side.
  * Commonly used for implementing server side rendering for `css-in-js` libraries.
@@ -130,7 +142,7 @@ export class Head extends Component<OriginProps> {
     const { dynamicImports, assetPrefix } = this.context._documentProps
     const { _devOnlyInvalidateCacheQueryString } = this.context
 
-    return dynamicImports.map((bundle: any) => {
+    return dedupe(dynamicImports).map((bundle: any) => {
       return (
         <link
           rel="preload"
@@ -380,7 +392,7 @@ export class NextScript extends Component<OriginProps> {
     const { dynamicImports, assetPrefix } = this.context._documentProps
     const { _devOnlyInvalidateCacheQueryString } = this.context
 
-    return dynamicImports.map((bundle: any) => {
+    return dedupe(dynamicImports).map((bundle: any) => {
       return (
         <script
           async