Ensure id handling applies for dynamic import in pages

packages/next/src/client/index.tsx

@@ -63,6 +63,21 @@ declare global {
   }
 }
 
+// ensure dynamic imports have deployment id added if enabled
+const getChunkScriptFilename = __webpack_require__.u
+
+// eslint-disable-next-line no-undef
+__webpack_require__.u = (chunkId: any) => {
+  return (
+    getChunkScriptFilename(chunkId) +
+    `${
+      process.env.__NEXT_DEPLOYMENT_ID
+        ? `?dpl=${process.env.__NEXT_DEPLOYMENT_ID}`
+        : ''
+    }`
+  )
+}
+
 type RenderRouteInfo = PrivateRouteInfo & {
   App: AppComponent
   scroll?: { x: number; y: number } | null

test/production/deployment-id-handling/app/app/from-app/edge/page.tsx

@@ -1,3 +1,4 @@
+'use client'
 import testImage from '../../../public/test.jpg'
 import Image from 'next/image'
 
@@ -6,6 +7,17 @@ export default function Page() {
     <>
       <p>hello app edge</p>
       <Image src={testImage} alt="test" />
+
+      <button
+        onClick={() => {
+          import('../../../data').then((mod) => {
+            console.log('loaded data', mod)
+          })
+        }}
+        id="dynamic-import"
+      >
+        click me
+      </button>
     </>
   )
 }

test/production/deployment-id-handling/app/app/from-app/page.tsx

@@ -1,3 +1,4 @@
+'use client'
 import testImage from '../../public/test.jpg'
 import Image from 'next/image'
 
@@ -6,6 +7,17 @@ export default function Page() {
     <>
       <p>hello app</p>
       <Image src={testImage} alt="test" />
+
+      <button
+        onClick={() => {
+          import('../../data').then((mod) => {
+            console.log('loaded data', mod)
+          })
+        }}
+        id="dynamic-import"
+      >
+        click me
+      </button>
     </>
   )
 }

test/production/deployment-id-handling/app/data.js

@@ -0,0 +1,3 @@
+export const data = {
+  now: Date.now(),
+}

test/production/deployment-id-handling/app/pages/index.tsx

@@ -6,6 +6,17 @@ export default function Page() {
     <>
       <p>hello pages</p>
       <Image src={testImage} alt="test image" />
+
+      <button
+        onClick={() => {
+          import('../data').then((mod) => {
+            console.log('loaded data', mod)
+          })
+        }}
+        id="dynamic-import"
+      >
+        click me
+      </button>
     </>
   )
 }

test/production/deployment-id-handling/app/pages/pages-edge.tsx

@@ -6,6 +6,17 @@ export default function Page() {
     <>
       <p>hello pages edge</p>
       <Image src={testImage} alt="test image" />
+
+      <button
+        onClick={() => {
+          import('../data').then((mod) => {
+            console.log('loaded data', mod)
+          })
+        }}
+        id="dynamic-import"
+      >
+        click me
+      </button>
     </>
   )
 }

test/production/deployment-id-handling/deployment-id-handling.test.ts

@@ -1,4 +1,5 @@
 import { createNextDescribe } from 'e2e-utils'
+import { check } from 'next-test-utils'
 import { join } from 'node:path'
 
 const deploymentId = Date.now() + ''
@@ -44,6 +45,28 @@ createNextDescribe(
             expect(link.attribs.href).toContain('dpl=' + deploymentId)
           }
         }
+
+        const browser = await next.browser(urlPath)
+        const requests = []
+
+        browser.on('request', (req) => {
+          requests.push(req.url())
+        })
+
+        await browser.elementByCss('#dynamic-import').click()
+
+        await check(
+          () => (requests.length > 0 ? 'success' : JSON.stringify(requests)),
+          'success'
+        )
+
+        try {
+          expect(
+            requests.every((item) => item.includes('dpl=' + deploymentId))
+          ).toBe(true)
+        } finally {
+          require('console').error('requests', requests)
+        }
       }
     )
   }