vercel / next.js

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

Parallel Intercepted routes not working when accessed from 404 error pages #72541

Open itsjavi opened 1 week ago

itsjavi commented 1 week ago

Link to the code that reproduces this issue

https://github.com/itsjavi/nextjs-demos/tree/issue/parallel-intercepted-404

To Reproduce

  1. Add a parallel intercepted route like in this example
  2. Add the following to your app:
    • error.tsx page
    • support for the @modal slot in your layout.tsx props, and put it inside the body.
    • a Link in your layout.tsx, linking to the intercepted route
  3. Navigate to any non-existing route to trigger a 404 error page
  4. Click to the link of the layout that would trigger the intercepted route

Current vs. Expected behavior

Current behavior

On next dev

When accessing Parallel Intercepted routes from a 404 page, it triggers the following client-side error:

UI:

Application error: a client-side exception has occurred (see the browser console for more information).

Console:

app-router.ts:52 TypeError: initialTree is not iterable
    at applyPatch (apply-router-state-patch-to-tree.ts:17:51)
    at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.ts:107:26)
    at navigate-reducer.ts:208:50

The above error occurred in the <Router> component. It was handled by the <ErrorBoundaryHandler> error boundary.

On next start

On next start, after build, navigating to the intercepted route from a 404 page works, but calling router.back() will trigger the same error again.

Expected behavior

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:03:15 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.18.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 9.12.2
Relevant Packages:
  next: 15.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: N/A
  react: 19.0.0-rc-66855b96-20241106
  react-dom: 19.0.0-rc-66855b96-20241106
  typescript: 5.6.3
Next.js Config:
  output: N/A

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

Parallel & Intercepting Routes

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

next dev (local), next start (local)

Additional context

CC @feedthejim Related issue: https://github.com/vercel/next.js/issues/48289

HM-Suiji commented 1 week ago

I meet the error too. But my error is more strict. When I go into my intercepted route, I can't see anything, but the real dom is existing which can be seen in devtools.