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

[eide-1]

Verify canary release

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

Provide environment information

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"?

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

_NEXT-1641

[hungcrush]

I tested on my Local (next build & next start) it works well. But I don't know why on my server it not works.

[danielle-o3h]

I am seeing the same issue in our Docker Environments reverting to version 13.4.9 is a temporary fix for the issue.

Any urls with [] (%5B, %5D) return a 404 error which includes the generated js files for any dynamic page

[hykelvinlee42]

I am seeing the same issue in our Docker Environments reverting to version 13.4.9 is a temporary fix for the issue.

Any urls with [] (%5B, %5D) return a 404 error which includes the generated js files for any dynamic page

I can confirm this solution works. The issue begins occurring since version 13.4.13-canary.16.

[harryoppa]

Anyone can check this??? :(( I can not use newest version..

[Baukaalm]

I have the same issue, described it here #54133 (comment).

[bryceAebi]

@hungcrush perhaps this is a clue as to why it's working locally but not on prod? Some issue with the caching of chunks. FWIW, this workaround did not solve the issue for my dynamic routes

#38507 (comment)

[bryceAebi]

I have more or less the same setup and the same issue (only dynamic routes), but I am only experiencing the error when I have Google Search Console "live test" my production URL, which makes this difficult to debug.

I'm not able to reproduce the error in production via Chrome Beta.

[scottpaulin]

I am experiencing similar issues with Google Search Console "live test" on production URL for a site deployed on Vercel. It makes it difficult to get pages indexed in Google Search.

It seems a little non-deterministic for me. Sometimes Google Search Console "live test" does not work on a page. Yesterday Google Search Console "live test" failed twice on a page then worked the third time.

next@13.4.4 and app router deployed on Vercel

[bryceAebi]

@scottpaulin I realized that my issue is not limited to my dynamic routes. It affects a bunch of my pages. The Live Test fails about two thirds of the time. But I do think my pages are getting indexed as I can find them using Google Search and my production pages load just fine when I navigate to them in the browser. Perhaps it's an issue with the Live Test crawler erroneously thinking that a certain chunk is unnecessary and not loading it. I'm hoping it's not actually impacting SEO...

[scottpaulin]

@bryceAebi yea I have seen it in a static route too.

Google also (eventually) indexes my pages. I think Google is recrawling pages every few days and eventually has a successful render.

Ahrefs is showing lots of errors about failed metadata etc, I'm guessing it's because the render fails.

Yea not sure if seo is being affected. Fingers crossed it isn't. Pretty scary issue for sites that rely on search traffic for revenue.

I am seeing a bunch of http status 0 errors in datadog. Might be unrelated though.

[marwinlewis]

In my case I have dynamic routing pages > [category] > index.tsx and [id].tsx. The problem started after upgrading nextjs. I also tried the router app and the same problem. 404 in compiled js file in production environment. Downgrading nextjs to 13.3.4 fixed this issue for me.