TypeError: Cannot destructure property 'parallelRouterKey' of 'param' as it is null.

[sebpalluel]

Link to the code that reproduces this issue

https://github.com/sebpalluel/parallel-router-key-destructure-property-error

To Reproduce

1. Install the packages with pnpm i
2. Start the application in development with pnpm run dev
3. The main page at http://localhost:3000/ is working, displaying a layout with parallel routes displayed conditionally in desktop or mobile view size.
4. Go to any non existing page like http://localhost:3000/dummy. It will display an error message coming from next/dist/client/components/layout-router.js"TypeError: Cannot destructure property 'parallelRouterKey' of 'param' as it is null."

Current vs. Expected behavior

It should display the placeholder not-found.txs

Verify canary release

• I verified that the issue exists in the latest Next.js 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: 20.1.0
  npm: 9.7.1
  Yarn: 1.22.19
  pnpm: 8.9.2
Relevant Packages:
  next: 14.0.3-canary.9
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

App Router

Additional context

When I comment out either AppNavLayoutDesktop or AppNavLayoutMobile in components/AppNavLayout.tsx, the error no longer occurs. Additionally, completely removing app/error.tsx also prevents the error, and instead, not-found.tsx is displayed as expected.

_NEXT-2095

[asplunds]

I discovered that this also happens when rendering a parallel route twice:

function Layout({ route }) {
   return <>
      {route}
      {route}
   </>
}

removing one of the instances makes the error go away but as soon as two or more are rendered it throws "TypeError: Cannot destructure property 'parallelRouterKey' of 'param' as it is null."

tested on Next.js 14.0.3

[sebpalluel]

Issue is still happing with:

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:53:18 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6000
Binaries:
  Node: 20.1.0
  npm: 9.7.1
  Yarn: 1.22.19
  pnpm: 8.11.0
Relevant Packages:
  next: 14.1.1-canary.3 // Latest available version is detected (14.1.1-canary.3).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

[dorji-dev]

Facing same issue with next -> 14.1.4. I also had the same requirement as the OP where I needed to show a parallel route in different places based on whether it is mobile or desktop. Also would like to clarify that the error occurs only on initial navigations, if i refresh the same page, the error disappears and if i go back to another page and visit the same page again, it works.

Update: @sebpalluel I was able to solve the issue by wrapping the children slot i.e. the page.tsx file in a route group leaving the other parallel routes as it is. Don't know how it solved the issue but at least it is working for now. You can try it as well. Link here: https://github.com/dorji-dev/next_app/tree/main/src/app/features/(implementations)/intercepting-routes

[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.