Dynamic routes cause a "ChunkLoadError" Happen Again!

j9729246-gmailcom · October 4, 2024, 7:47am

Dynamic routes cause a "ChunkLoadError" when using the app router in a dockerized Next.js 13 SPA

opened 05:59PM - 14 Aug 23 UTC

closed 10:02PM - 02 Oct 23 UTC

bug linear: next

### Verify canary release - [X] I verified that the issue exists in the latest …Next.js canary release ### Provide environment information ```bash Operating System: Platform: linux Arch: x64 Version: #85-Ubuntu SMP Fri Jul 7 15:25:09 UTC 2023 Binaries: Node: 18.15.0 npm: 9.5.0 Yarn: N/A pnpm: N/A Relevant Packages: next: 13.4.15 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) of Next.js are affected? (leave empty if unsure) App Router ### Link to the code that reproduces this issue or a replay of the bug https://github.com/eide-1/sample-project ### To Reproduce **Steps to Reproduce:** 1. Run the the project in a production environment by following the instructions in the README file 2. Click on the "Go to Dynamic Route" button. You will be presented with an application error 3. Right-click anywhere on the webpage and click "Inspect". The browser console will display the "ChunkLoadError" ### Describe the Bug I am currently working on upgrading an existing Next.js SPA that uses the pages router to the app router. The project is deployed using Docker and Nginx. However, I noticed that dynamic routes cause a "ChunkLoadError" when the SPA is deployed in a production environment. All pages (including dynamic routes) are functional in a development environment. The dynamic route in question uses the "use client" directive. I noticed that if I remove the "use client" directive and any component or hook that requires it from the page, I can get it to render properly in production mode. I created a sample project that uses the same tech stack as my current SPA to demonstrate the issue and I included the steps to reproduce the issue below. I also found the following Stack Overflow question detailing a similar issue to the one I described above: [In Next.js 13 using App Router, why can't I export dynamic routes with "use client"?](https://stackoverflow.com/questions/76824224/in-next-js-13-using-app-router-why-cant-i-export-dynamic-routes-with-use-clie) ### Expected Behavior Dynamic routes should work in the production environment just like they used to under the pages router without causing a ChunkLoadError. ### Which browser are you using? (if relevant) Microsoft Edge 115.0.1901.203 (64-bit) ### How are you deploying your application? (if relevant) Docker/Nginx <sub>[NEXT-1641](https://linear.app/vercel/issue/NEXT-1641/dynamic-routes-cause-a-chunkloaderror-when-using-the-app-router-in-a)</sub>

This issue still exist. No matter version next14 or after version next 13.4.12.

Thank you.

supertest929-gmailco · October 4, 2024, 7:51am

same issue happens to me. Please help!!!

system · November 3, 2024, 7:52am

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
ChunkLoadError: Loading chunk Help nextjs	0	7	January 20, 2025
Dynamic routes resolve in 404 using generateStaticParams Help nextjs	4	6	January 21, 2025
Dynamic route is not found in prod. it works fine on localhost Help nextjs	4	19	December 5, 2024
Issue with deployment using parallel intercepted route in Next.js Help nextjs	3	35	November 2, 2024
Build errors when deploying Next.js app on vercel Help nextjs	9	41	October 24, 2024

Dynamic routes cause a "ChunkLoadError" Happen Again!

Related topics