next.js: Multi-zone not working on version 13.4.19. 13.4.3 works fine

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Mon Dec 19 20:44:01 PST 2022; root:xnu-8020.240.18~2/RELEASE_X86_64
    Binaries:
      Node: 16.14.0
      npm: 8.3.1
      Yarn: 1.22.19
      pnpm: 7.32.2
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A
    Next.js Config:
      output: N/A


warn  - Latest canary version not detected, detected: "13.4.19", newest: "13.4.20-canary.3".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue
✨  Done in 5.96s.

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

yarn dev

To Reproduce

on next.config.js add

const { APP_URL } = process.env

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: `/:path*`,
      },
      {
        source: '/app',
        destination: `${APP_URL}/app`,
      },
      {
        source: '/app/:path*',
        destination: `${APP_URL}/app/:path*`,
      },
    ]
  },
}

module.exports = nextConfig

on .env.local add APP_URL=http://localhost:3001

http://localhost:3001 references another nextjs app on port 3001

Describe the Bug

When using Multi-zone to video a second app. The app refreshes indefinitely. The terminal prints https://nextjs.org/docs/messages/fast-refresh-reload

Expected Behavior

Downgrading to version 13.4.3 works fine. The app doesn’t refresh indefinitely when using multi-zone

Which browser are you using? (if relevant)

Version 1.56.20 Chromium: 115.0.5790.171 (Official Build) (x86_64)

How are you deploying your application? (if relevant)

not deployed yet

About this issue

Original URL
State: closed
Created 10 months ago
Reactions: 21
Comments: 20 (4 by maintainers)

Commits related to this issue

fix hmr in multi-zone handling (#59307) ### What? When running a [multi-zone](https://github.com/vercel/next.js/tree/canary/examples/with-zones) app in dev, app pages would infinitely reload ##... — committed to vercel/next.js by ztanner 7 months ago
Fix: HMR in multi-zone handling 🌱 (#59471) ### What? When running a [multi-zone](https://github.com/vercel/next.js/tree/canary/examples/with-zones) app in dev, guest app pages would infinitely re... — committed to vercel/next.js by agustints 6 months ago

Most upvoted comments

It’s still not fixed in 14.0.4. It should be opened again.

wjaykim on Dec 8, 2023

Adding what I know here as I’ve been investigating this bug since yesterday. In our case we are running our main app on port 8080 and our subzone on 8081.

Introduced in 13.4.13-canary-0, likely caused by https://github.com/vercel/next.js/pull/53029, a frankly enormous refactor introduced in a patch release and mysteriously absent from the release notes, probably due to being a revert of a revert
Still happens on 13.5.2
Only happens in dev mode, prod mode works as it did prior to 13.4.13
In the hmr websocket the final message before the reload is this
```
{
 "event": "client-full-reload",
 "stackTrace": "SyntaxError: Unexpected token '<', \"<!DOCTYPE \"... is not valid JSON",
 "hadRuntimeError": false
}
```
which seems to indicate that the fast refresh isn’t hitting the correct route and is getting an index page back.
At the same time a request is sent to ${otherApp}/${otherAppBasePath}/_next/static/webpack/${hash}.webpack.hot-update.json. I can’t catch the response body, but the headers indeed have Content-Type: text/html; charset=utf8 which is obviously wrong.
The requested file does not exist, however if I am on the subzone app directly (in our case visiting http://subapp.localhost:8081/zonePath/) when I restart the dev server, another hot-update file is created with a different hash and successfully requested from the server.

I don’t know what goes into the hash, but is it possible that the requested hash is wrong because it’s using the port that the web browser is on and not the port that the underlying server is running on?

bjornsnoen on Sep 21, 2023

It’s so easy to reproduce:

Zone 1: https://codesandbox.io/p/sandbox/multi-zones-1-m79cw8

Zone 2: https://codesandbox.io/p/sandbox/multi-zones-2-xfk4d9

I updated to 14.0.4 and also still experience the same issue as before

please kindly check again @ztanner

exneval on Dec 8, 2023

In version 14 with App Router this issue doesn’t occur, but Fast Refresh doesn’t work anymore. When editing any file the change is not visible under the same URL of the Host app; it’s necessary to navigate to the URL of the zone to see the new changes or reload the page for each change. If I enable Turbopack, the same behavior happens as with Page Router.

bryanbarrios on Nov 2, 2023

i met same problem with with-zone example and next 14.

https://github.com/vercel/next.js/tree/canary/examples/with-zones

bookinlife on Dec 1, 2023

It’s even on NextJS 14

aladinflux on Nov 23, 2023

It’s so easy to reproduce:

Zone 1: https://codesandbox.io/p/sandbox/multi-zones-1-m79cw8

Zone 2: https://codesandbox.io/p/sandbox/multi-zones-2-xfk4d9

exneval on Oct 12, 2023

I created this repository with the issue https://github.com/liorheber/multizone-issue

liorheber on Oct 12, 2023

I’ve pulled down @agustints fix and the issue still persists. I have made a comment on the PR with amendments which I tried locally and seems fine.

jamaybyrone on Dec 13, 2023

Please @ijjk @huozhi its blocking us for upgrading since 13.4.4 🙏 and quite restrictive for the use of turborepo

9vfQbg7z4ajrGQxR on Nov 20, 2023

Hi @samcx, have you been able to review the reproduction repos yet? Thank you.

francofantini on Oct 18, 2023

Just faced the issues in my side as well, 13.4.13-canary-0 break multi zones in dev server, even with 13.5.2

please take a look @ijjk @huozhi

exneval on Sep 25, 2023