ChunkLoadError: Loading chunk app/layout failed. (timeout: http://localhost:3000/_next/static/chunks/app/layout.js)

[dgrimaldi-intellyse]

Link to the code that reproduces this issue

https://github.com/Intellyse/next-js-bug

To Reproduce

1. clone project
2. npm install
3. npm run dev
4. open the page and you can see chrome console output: Uncaught SyntaxError: Invalid or unexpected token
5. same minutes you can see error:Uncaught ChunkLoadError: Loading chunk app/layout failed.

Current vs. Expected behavior

1. First time open the page is error but you refresh page is work!
2. I expected is work all the time

Provide environment information

Operating System:
  Platform: wls ubutnu
  Arch: arm64
  Version: wls version 2
Binaries:
  Node: 20.9.0
  npm: 10.1.0
Relevant Packages:
  next: 14.2.3 // I tried also last canary version (15.0.0-canary.10).
  eslint-config-next: 14.2.3
  react: 18.2.0
  react-dom: 18.0.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Webpack

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

next dev (local)

Additional context

The error seems happen randomly, and we have this issue also in production. It seems related with something with webpack

__webpack_require__.f.j = function (chunkId, promises) {
  // JSONP chunk loading for javascript
  var installedChunkData = __webpack_require__.o(installedChunks, chunkId)
    ? installedChunks[chunkId]
    : undefined;
  if (installedChunkData !== 0) {
    // 0 means "already installed".

    // a Promise means "currently loading".
    if (installedChunkData) {
      promises.push(installedChunkData[2]);
    } else {
      if ("webpack" != chunkId) {
        // setup Promise in chunk cache
        var promise = new Promise(function (resolve, reject) {
          installedChunkData = installedChunks[chunkId] = [resolve, reject];
        });
        promises.push((installedChunkData[2] = promise));

        // start chunk loading
        var url = __webpack_require__.p + __webpack_require__.u(chunkId);
        // create error before stack unwound to get useful stacktrace later
        var error = new Error();
        var loadingEnded = function (event) {
          if (__webpack_require__.o(installedChunks, chunkId)) {
            installedChunkData = installedChunks[chunkId];
            if (installedChunkData !== 0) installedChunks[chunkId] = undefined;
            if (installedChunkData) {
              var errorType = event && (event.type === "load" ? "missing" : event.type);
              var realSrc = event && event.target && event.target.src;
              error.message =
                "Loading chunk " + chunkId + " failed.\n(" + errorType + ": " + realSrc + ")";
              error.name = "ChunkLoadError";
              error.type = errorType;
              error.request = realSrc;
              installedChunkData[1](error);
            }
          }
        };
        __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
      } else installedChunks[chunkId] = 0;
    }
  }
};

the error rise at line: var error = new Error();

[DavidLeBonk]

I have also encountered this issue.

[dgrimaldi-intellyse]

Using --turbo seems mitigate the issue, at least in local

[DavidLeBonk]

Using --turbo seems mitigate the issue, at least in local

Thanks for the info, I will try at home. Hopefully they fix the root cause soon.

[SkayuX]

Using --turbo seems mitigate the issue, at least in local

I can agree it mitigates the issue on v14.1.3

[jbntlff]

Having the same issue with Tailwind Template: Studio. Confirmed testing with --turbo seems to mitigate...

[Enzo-PVsyst]

Same issue on node v20.16.0 and Next v14.2.5

Where do you use --turbo as a workaround ? On start command ?

[dgrimaldi-intellyse]

Same issue on node v20.16.0 and Next v14.2.5

Where do you use --turbo as a workaround ? On start command ?

In the package.json at dev command

"dev": "next dev --turbo",