ChunkLoadError
issue.This is the main content of the application, rendered from src/app/[locale]/page.tsx
.
Below, you should see content loaded from a parallel route. When this application is deployed to a production environment like Firebase App Hosting or Google Cloud Run, fetching the JavaScript chunk for the parallel route fails, resulting in a ChunkLoadError
and a fatal application crash.
The issue is related to how the next-intl middleware handle URL-encoded characters (like %40
resulting from @
) in chunk paths, which Next.js uses for parallel routes. Specifically, requests to paths like /_next/static/chunks/app/%5Blocale%5D/%40parallel/page.js
fail with a 404 error on some production environments like Firebase App Hosting or Google Cloud Run.
This Minimum Complete Verifiable Example (MCVE) is hosted on GitHub: https://github.com/davemecha/nextjs-parallel-routes-crash-mcve.
src/app/[locale]/@parallel/page.tsx
.If you are seeing this, the parallel route has loaded successfully.
This works as expected on a local development server on in a local production build. However, on certain cloud platforms that improperly decode URL paths, the request for this component's JavaScript chunk will fail, and you would see an error for the whole app instead of any content.
On a first load, the initial rendered app might not crash, even in error case (visible in the console). Try refreshing the page to trigger the page crash.