search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.73k stars 26.62k forks source link

Hot reload does not work with intercepted routes #54386

Open tgroutars opened 1 year ago

tgroutars commented 1 year ago

Verify canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.13.0
      npm: 8.19.3
      Yarn: 1.22.19
      pnpm: 7.33.3
    Relevant Packages:
      next: 13.4.20-canary.2
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

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

App Router

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

https://github.com/tgroutars/next-repro

To Reproduce

Clone the reproduction repo and run npm run dev

Open /foo

Click the "BAR" link. This will be intercepted and open an aside

Modify globals.css. For example, change the gap in .wrapper from 16px to 8px

You will get the following error

Error: Could not find the module "[...]/src/app/foo/layout.tsx#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

Describe the Bug

Next throws an error when modifying code while a route is intercepted in development.

This makes it very hard to work with intercepted route, since every time you make a change, you have to reload the page to get rid of the error. Reloading actually leads to the actual route and not the intercepted route, so you then have to go back and reopen the intercepted route

Expected Behavior

Hot relaoding should work with intercepted routes

Which browser are you using? (if relevant)

Chrome 115.0.5790.170

How are you deploying your application? (if relevant)

No response

musabhusaini commented 5 months ago

Just ran into this issue in version 14.1.0. Here's a minimal code sandbox that reproduces this error.

To recreate:

  1. Navigate to /board.
  2. Click on "Go to sub".
  3. Make a small code change to app/board/(..)sub/page.tsx file.
  4. Receive the following error: 
    Error: Could not find the module "/workspaces/sandbox/app/board/Header.tsx#" in the React Client Manifest. This is probably a 
bug in the React Server Components bundler.
    at stringify (<anonymous>)
    at AsyncLocalStorage.run (node:async_hooks:346:14)