[NEXT-3982] ChunkLoadError: Loading chunk app/layout failed. (timeout: http://localhost:3000/_next/static/chunks/app/layout.js)

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();

Clone the linked reproduction project, run npm install and npm run dev, then inspect the browser console and the generated _next/static/chunks/app/layout.js request. Start at the reported var error = new Error() line in the chunk-loading code; done means the initial page load succeeds consistently without the SyntaxError or ChunkLoadError.