Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fallback rewrites with catch all route causes a JSON error

See original GitHub issue

Verify canary release

I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64
Binaries:
  Node: 16.10.0
  npm: 7.24.0
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.1.7-canary.31
  react: 18.1.0
  react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I’m using rewrites with the fallback option to rewrite after dynamic routes have been checked. This works fine during server rendering, but when the app rehydrates, a fetch is made to /produkte.json, causing the 404 page to be rendered and sent to the client (as the route doesn’t exist), which cannot be interpreted as JSON, therefore causing the app to crash.

Error in the console

The 404 page’s HTML returned for the produkte.json request

Expected Behavior

The application “follows” rewrites when fetching the JSON content (or doesn’t fetch it at all) and doesn’t crash.

To Reproduce

Clone the repo: https://github.com/johnnyomair/next-rewrites-fallback-bug-demo
Install dependencies npm install
Start application npm run dev
Click on “Produkte” link on homepage

Issue Analytics

State:
Created a year ago
Reactions:2
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

wyattjohcommented, Jun 29, 2022

I can see that as well, taking a closer look!

0reactions

johnnyomaircommented, Aug 1, 2022

Sorry for the late response.

The reason we’re not using afterFiles is because our catch-all may specify paths that somewhat collide with the rewrites. For instance, it may return a path /produkte/neue-produkte. This page should not be rewritten to /products/neue-produkte. Only paths that do not match a path specified in the catch-all should be rewritten.

I can see why this might not work due to the client not having a list of all paths specified in the catch-all. As we have found a workaround (see https://github.com/vercel/next.js/issues/37510#issuecomment-1165493949), I’m fine with that. Thanks for the effort! 🙂