Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
itsjavi opened this issue Nov 9, 2024 · 5 comments
Open
Labels
bug Issue was opened via the bug report template. Parallel & Intercepting Routes Related to Parallel and/or Intercepting routes.

Comments

@itsjavi
Copy link

itsjavi commented Nov 9, 2024

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

  • The intercepted route content is shown on 404 pages, when navigating to that route.
  • router.back() works as expected in all the above scenarios.

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: #48289

@itsjavi itsjavi added the bug Issue was opened via the bug report template. label Nov 9, 2024
@github-actions github-actions bot added the Parallel & Intercepting Routes Related to Parallel and/or Intercepting routes. label Nov 9, 2024
@itsjavi itsjavi changed the title Parallel Intercepted routes not working when accessed from 404 erorpages Parallel Intercepted routes not working when accessed from 404 error pages Nov 9, 2024
@HM-Suiji
Copy link

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.

@flygomel
Copy link

same here
"next": "15.1.4"

@zerocsss
Copy link

same here
"next": "15.2.3"

@mikeb1986
Copy link

I am experiencing the same issue.

With slot containing only default.tsx

  • navigate to any invalid url to get 404 page. try to navigate to "/" with Link, navigation is fine

With slot containing both default.tsx and page.tsx

  • navigate to any invalid url to get 404 page. try to navigate to "/" with Link, error is observed
  • Uncaught Error: initialTree is not iterable

@alexnaish
Copy link

This is still an issue with the latest releases (next@15.3.1).

We were attempting to use this for a feature to pop up a cart overlay upon clicking the "view cart" link but also allowing a hardlink to a cart details page.

As a workaround, we're going to remove the intercept routes and manually update the URL upon the mount of the overlay component. It should achieve the same effect...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Parallel & Intercepting Routes Related to Parallel and/or Intercepting routes.
Projects
None yet
Development

No branches or pull requests

6 participants