HMR doesn't work on parallel routes while using turbopack

[azvyae]

Link to the code that reproduces this issue

https://github.com/azvyae/turbopack-parallel-routes-hmr-bug

To Reproduce

1. Start the development server with --turbo flag npm run dev
2. Open the browser at localhost:3000
3. Try to change Hello World to Hello Worlds inside (it should work normally)
4. Open localhost:3000/parallel
5. Try to change corresponding page.tsx (if "Foo page" is shown, try to change @foo/page.tsx) (HMR is not working)

PS: Interestingly, if there is only one folder of parallel route (e.g, only @foo/page.tsx or @bar/page.tsx) exist on the app, the problem is not gonna happen.

Current vs. Expected behavior

Current: HMR doesn't work in parallel routes

Expected: The page inside the parallel routes should be updated with HMR if there's an update in the component file.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #29~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Apr  4 14:39:20 UTC 2
  Available memory (MB): 15707
  Available CPU cores: 20
Binaries:
  Node: 20.12.1
  npm: 10.5.0
  Yarn: N/A
  pnpm: 9.1.1
Relevant Packages:
  next: 14.3.0-canary.63 // Latest available version is detected (14.3.0-canary.63).
  eslint-config-next: N/A
  react: 19.0.0-beta-4508873393-20240430
  react-dom: 19.0.0-beta-4508873393-20240430
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Parallel & Intercepting Routes, Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[azvyae]

It also happens on:

next@14.2.0
next@14.2.1
next@14.2.2
next@14.2.3

Still working properly on next@14.1.4

[wbinnssmith]

Hi @azvyae, unfortunately I can't reproduce this issue given the provided steps and repo. Is there some state you had present or additional steps taken I should be aware of?

[azvyae]

@wbinnssmith did the UI refreshes automatically when you change the code inside the parallel route pages? Please make sure that the parallel routes should have two folders of @\foo and @\bar. Try to open up localhost:3000 then take look at the text shown.

If the UI shows "foo page" it means the file that you should try to edit is @foo/page.tsx, otherwise @bar/page.tsx

Unfortunately, when the fast refresh server is up, i can't get the auto refresh on the UI after I edited the page.tsx files

[AmruthPillai]

I have this issue as well. The only way to reflect changes made on a page under a parallel route is to restart the dev server. Which is a shame, I was really looking forward to using Parallel Routes and Streaming Data. Adding default.tsx, loading.tsx doesn't help either.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.