fix: HMR not works when assetPrefix set to URL (#68622)

devjiwonchoi · web-flow · commit 01a3f988b956 · 2024-08-08T15:34:36.000+09:00
diff --git a/packages/next/src/server/config.ts b/packages/next/src/server/config.ts
@@ -1069,6 +1069,16 @@ export default async function loadConfig(
       }
     }
 
+    if (
+      phase === PHASE_DEVELOPMENT_SERVER &&
+      URL.canParse(userConfig.assetPrefix ?? '')
+    ) {
+      curLog.warn(
+        `Absolute URL assetPrefix "${userConfig.assetPrefix}" may disrupt development HMR.\n` +
+          'See more info here https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix'
+      )
+    }
+
     if (userConfig.target && userConfig.target !== 'server') {
       throw new Error(
         `The "target" property is no longer supported in ${configFileName}.\n` +
diff --git a/packages/next/src/server/lib/router-server.ts b/packages/next/src/server/lib/router-server.ts
@@ -668,7 +668,15 @@ export async function initialize(opts: {
         // assetPrefix overrides basePath for HMR path
         if (assetPrefix) {
           hmrPrefix = normalizedAssetPrefix(assetPrefix)
+
+          if (URL.canParse(hmrPrefix)) {
+            // remove trailing slash from pathname
+            // return empty string if pathname is '/'
+            // to avoid conflicts with '/_next' below
+            hmrPrefix = new URL(hmrPrefix).pathname.replace(/\/$/, '')
+          }
         }
+
         const isHMRRequest = req.url.startsWith(
           ensureLeadingSlash(`${hmrPrefix}/_next/webpack-hmr`)
         )
diff --git a/test/development/app-dir/hmr-asset-prefix-full-url/app/layout.tsx b/test/development/app-dir/hmr-asset-prefix-full-url/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Root({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/development/app-dir/hmr-asset-prefix-full-url/app/page.tsx b/test/development/app-dir/hmr-asset-prefix-full-url/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>before edit</p>
+}
diff --git a/test/development/app-dir/hmr-asset-prefix-full-url/asset-prefix.test.ts b/test/development/app-dir/hmr-asset-prefix-full-url/asset-prefix.test.ts
@@ -0,0 +1,32 @@
+import { createNext } from 'e2e-utils'
+import { findPort, retry } from 'next-test-utils'
+
+describe('app-dir assetPrefix full URL', () => {
+  let next, forcedPort
+  beforeAll(async () => {
+    forcedPort = ((await findPort()) ?? '54321').toString()
+
+    next = await createNext({
+      files: __dirname,
+      forcedPort,
+      nextConfig: {
+        assetPrefix: `http://localhost:${forcedPort}`,
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should not break HMR when asset prefix set to full URL', async () => {
+    const browser = await next.browser('/')
+    const text = await browser.elementByCss('p').text()
+    expect(text).toBe('before edit')
+
+    await next.patchFile('app/page.tsx', (content) => {
+      return content.replace('before', 'after')
+    })
+
+    await retry(async () => {
+      expect(await browser.elementByCss('p').text()).toContain('after edit')
+    })
+  })
+})

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function Page() {`
	`2`	`+ return <p>before edit</p>`
	`3`	`+}`