Skip to content
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

Routing from a param page to a child page while changing the current param case (same string different case) crashes #61722

Closed
axpro opened this issue Feb 6, 2024 · 3 comments · Fixed by #61726
Assignees
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. locked

Comments

@axpro
Copy link

axpro commented Feb 6, 2024

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/vigilant-river-y8rs8r?file=%2Fapp%2F%5BparamA%5D%2Fpage.js%3A9%2C48&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clsagjayy0006396hrym868ke%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clsagjayy0002396h9vms2eu0%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clsagjayy0004396ho5vh4r7s%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clsagjayy0005396htb4wv336%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B57.24198755283389%252C42.75801244716611%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clsagjayy0002396h9vms2eu0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clsagjayx0001396h2am7fv6i%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clsah2dng0002396glgt8qoq2%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A9%252C%2522startColumn%2522%253A48%252C%2522endLineNumber%2522%253A9%252C%2522endColumn%2522%253A48%257D%255D%252C%2522filepath%2522%253A%2522%252Fapp%252F%255BparamA%255D%252Fpage.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clsagjayy0002396h9vms2eu0%2522%252C%2522activeTabId%2522%253A%2522clsah2dng0002396glgt8qoq2%2522%257D%252C%2522clsagjayy0005396htb4wv336%2522%253A%257B%2522id%2522%253A%2522clsagjayy0005396htb4wv336%2522%252C%2522activeTabId%2522%253A%2522clsagmhj100lt396hi4r1ehlw%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clsagmhj100lt396hi4r1ehlw%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%2522%257D%255D%257D%252C%2522clsagjayy0004396ho5vh4r7s%2522%253A%257B%2522id%2522%253A%2522clsagjayy0004396ho5vh4r7s%2522%252C%2522activeTabId%2522%253A%2522clsagmb6k00jm396hkprjfloi%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clsagmb6k00jm396hkprjfloi%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

To Reproduce

  1. start the app
  2. open dev tools
  3. click on "/ParamA" link
  4. click on "/paramA/paramB" link
  5. see dev tools network requests and wait for error to appear

Current vs. Expected behavior

The app should route to the new param page

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:30:44 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6000
Binaries:
  Node: 20.8.1
  npm: 10.1.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.1-canary.36 // Latest available version is detected (14.1.1-canary.36).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

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

App Router

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

next dev (local)

Additional context

No response

NEXT-2377

@axpro axpro added the bug Issue was opened via the bug report template. label Feb 6, 2024
@ztanner ztanner added the linear: next Confirmed issue that is tracked by the Next.js team. label Feb 6, 2024
@ztanner ztanner self-assigned this Feb 6, 2024
@ztanner
Copy link
Member

ztanner commented Feb 6, 2024

Great reproduction -- thank you for reporting. I will have a PR to fix shortly.

ztanner added a commit that referenced this issue Feb 6, 2024
### What
When navigating to a page with dynamic params using a certain casing,
and then following a link to another page using _different_ casing for
the same param, the router would get stuck in an infinite suspense
cycle.

### Why
On the client we normalize cache keys by lowercasing the values for
dynamic segments. However the RSC data for each segment wouldn't have
this same casing logic applied. This is causing the router to not
recognize that there is already RSC data available for that segment,
resulting in an infinite suspense cycle.

### How
The `toLowerCase()` logic shouldn't be needed here. Technically we could
leave this in place and update `matchSegment` to also apply the
lowercase logic, but currently there are too many utility functions that
parse segments to comfortably make that change. I confirmed that the bug
related to why we lowercased these router cache keys is no longer
present after making this change.

Fixes #61722
Closes NEXT-2377
@sndalama-data443
Copy link

@ztanner Noticed affected areas only list the App Router. However, i am experiencing this bug with the Pages Router aswell.

Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 21, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. locked
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants