Fix: HMR in multi-zone handling 🌱

packages/next/src/server/lib/router-server.ts

@@ -33,6 +33,7 @@ import {
 import { RedirectStatusCode } from '../../client/components/redirect-status-code'
 import { DevBundlerService } from './dev-bundler-service'
 import { type Span, trace } from '../../trace'
+import { ensureLeadingSlash } from '../../shared/lib/page-path/ensure-leading-slash'
 
 const debug = setupDebug('next:router-server:main')
 const isNextFont = (pathname: string | null) =>
@@ -585,13 +586,15 @@ export async function initialize(opts: {
       })
 
       if (opts.dev && developmentBundler && req.url) {
-        const isHMRRequest = req.url.includes('/_next/webpack-hmr')
+        const { basePath, assetPrefix } = config
+
+        const isHMRRequest = req.url.startsWith(
+          ensureLeadingSlash(`${assetPrefix || basePath}/_next/webpack-hmr`)
+        )
+
         // only handle HMR requests if the basePath in the request
         // matches the basePath for the handler responding to the request
-        const isRequestForCurrentBasepath =
-          !config.basePath || pathHasPrefix(req.url, config.basePath)
-
-        if (isHMRRequest && isRequestForCurrentBasepath) {
+        if (isHMRRequest) {
           return developmentBundler.hotReloader.onHMR(req, socket, head)
         }
       }

test/e2e/multi-zone/app/apps/guest/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  basePath: '/guest',
+}

test/e2e/multi-zone/app/apps/first/package.json → test/e2e/multi-zone/app/apps/guest/package.json

@@ -1,5 +1,5 @@
 {
   "version": "0.0.1",
   "private": true,
-  "name": "first-app"
+  "name": "guest-app"
 }

test/e2e/multi-zone/app/apps/second/pages/another/[slug].tsx → test/e2e/multi-zone/app/apps/guest/pages/another/[slug].tsx

@@ -1,5 +1,5 @@
 export default function Page() {
-  return <p>hello from second app /another/[slug]</p>
+  return <p>hello from guest app /another/[slug]</p>
 }
 
 export function getServerSideProps({ params }) {

test/e2e/multi-zone/app/apps/first/pages/blog/[slug].tsx → test/e2e/multi-zone/app/apps/guest/pages/blog/[slug].tsx

@@ -1,5 +1,5 @@
 export default function Page() {
-  return <p>hello from first app /blog/[slug]</p>
+  return <p>hello from guest app /blog/[slug]</p>
 }
 
 export function getServerSideProps({ params }) {

test/e2e/multi-zone/app/apps/guest/pages/index.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react'
+
+export default function Page() {
+  const [date, setDate] = useState<Number>()
+
+  useEffect(() => {
+    setDate(Date.now())
+  }, [])
+
+  // this variable is edited by the test to verify HMR
+  const editedContent = ''
+  return (
+    <>
+      <p>hello from guest app</p>
+      <div>{editedContent}</div>
+      <div id="now">{`${date}`}</div>
+    </>
+  )
+}

test/e2e/multi-zone/app/apps/host/next.config.js

@@ -0,0 +1 @@
+module.exports = {}

test/e2e/multi-zone/app/apps/second/package.json → test/e2e/multi-zone/app/apps/host/package.json

@@ -1,5 +1,5 @@
 {
   "version": "0.0.1",
   "private": true,
-  "name": "second-app"
+  "name": "host-app"
 }

test/e2e/multi-zone/app/apps/second/pages/blog/[slug].tsx → test/e2e/multi-zone/app/apps/host/pages/blog/[slug].tsx

@@ -1,5 +1,5 @@
 export default function Page() {
-  return <p>hello from second app /blog/[slug]</p>
+  return <p>hello from host app /blog/[slug]</p>
 }
 
 export function getServerSideProps({ params }) {

test/e2e/multi-zone/app/apps/host/pages/index.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react'
+
+export default function Page() {
+  const [date, setDate] = useState<Number>()
+
+  useEffect(() => {
+    setDate(Date.now())
+  }, [])
+
+  // this variable is edited by the test to verify HMR
+  const editedContent = ''
+  return (
+    <>
+      <p>hello from host app</p>
+      <div>{editedContent}</div>
+      <div id="now">{`${date}`}</div>
+    </>
+  )
+}

test/e2e/multi-zone/app/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "node server.js",
-    "build": "yarn next build apps/first && yarn next build apps/second",
+    "build": "yarn next build apps/host && yarn next build apps/guest",
     "start": "NODE_ENV=production node server.js"
   },
   "dependencies": {

test/e2e/multi-zone/app/server.js

@@ -7,7 +7,7 @@ const http = require('http')
   const requestHandlers = new Map()
   const dev = process.env.NODE_ENV !== 'production'
 
-  for (const appName of ['first', 'second']) {
+  for (const appName of ['host', 'guest']) {
     const appDir = path.join(__dirname, 'apps', appName)
     const nextApp = next({
       dir: appDir,
@@ -20,7 +20,7 @@ const http = require('http')
   }
 
   const server = http.createServer(async (req, res) => {
-    const appName = req.url?.split('/')[1].split('?')[0]
+    const appName = req.url.startsWith('/guest') ? 'guest' : 'host'
     const handler = requestHandlers.get(appName)
 
     if (!handler) {

test/e2e/multi-zone/multi-zone.test.ts

@@ -17,19 +17,19 @@ createNextDescribe(
   },
   ({ next, isNextDev }) => {
     it.each([
-      { pathname: '/first', content: ['hello from first app'] },
-      { pathname: '/second', content: ['hello from second app'] },
+      { pathname: '/', content: ['hello from host app'] },
+      { pathname: '/guest', content: ['hello from guest app'] },
       {
-        pathname: '/first/blog/post-1',
-        content: ['hello from first app /blog/[slug]'],
+        pathname: '/blog/post-1',
+        content: ['hello from host app /blog/[slug]'],
       },
       {
-        pathname: '/second/blog/post-1',
-        content: ['hello from second app /blog/[slug]'],
+        pathname: '/guest/blog/post-1',
+        content: ['hello from guest app /blog/[slug]'],
       },
       {
-        pathname: '/second/another/post-1',
-        content: ['hello from second app /another/[slug]'],
+        pathname: '/guest/another/post-1',
+        content: ['hello from guest app /another/[slug]'],
       },
     ])(
       'should correctly respond for $pathname',
@@ -49,7 +49,8 @@ createNextDescribe(
 
     if (isNextDev) {
       async function runHMRTest(app: string) {
-        const browser = await next.browser(`/${app}`)
+        const isHostApp = app === 'host'
+        const browser = await next.browser(isHostApp ? '/' : app)
         expect(await browser.elementByCss('body').text()).toContain(
           `hello from ${app} app`
         )
@@ -82,8 +83,8 @@ createNextDescribe(
       }
 
       it('should support HMR in both apps', async () => {
-        await runHMRTest('first')
-        await runHMRTest('second')
+        await runHMRTest('host')
+        await runHMRTest('guest')
       })
     }
   }