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

[Haseebshah936]

@dgrimaldi-intellyse I just had this issue in my production app. Occurred only once but is there a proper work around? I am using next: 14.2.5. Is there any solution that you found?

[Alixame]

Has anyone found a definitive solution for the chunk loading issue?

I’ve been looking into this problem, which seems to have started in version 13.3.4 of Next.js, and it continues to affect all subsequent versions, including the pre-release version 15.0.0.canary.

Some people suggest that removing the .next folder clears the cache and temporarily fixes the issue, but this solution isn’t viable for production environments, where such an approach could cause more problems. Others have implemented workarounds like forcing a page reload when the error is detected, but these are not ideal solutions either.

So far, I haven’t seen anyone in the community find a solid fix, and it seems like the newer versions of Next.js aren’t addressing this issue, possibly because it’s considered an “old” bug that started in version 13.3.4. We know it’s related to Webpack, but is there any viable alternative to Webpack for production environments at the moment?

[hson194]

I have this issue as well, it's quite frustrating. Hopefully, it will be resolved soon.

[elie222]

Same. The issue in in production. Seeing lots of errors about it in Sentry. Never happens in local dev for me.

[Haseebshah936]

I was able to solve the issue by removing dynamic imports of components. I opted state based rendering of these components.

[yhsparrow]

Auto-detecting and reloading failed chunks in my global layout.tsx worked for me. Not sure its the ideal solution but seems to resolve the problem.

<script dangerouslySetInnerHTML={{
          __html: `
            // Track failed chunks
            window.__failedChunks = new Set();

            // Retry loading failed chunks
            function retryLoadChunk(url, maxRetries = 3) {
              if (window.__failedChunks.has(url)) return;

              let retries = 0;
              const loadScript = () => {
                if (retries >= maxRetries) {
                  window.__failedChunks.add(url);
                  return;
                }

                retries++;
                const script = document.createElement('script');
                script.src = url;
                script.async = true;
                script.onerror = () => {
                  setTimeout(loadScript, 1000 * retries);
                };
                document.head.appendChild(script);
              };

              loadScript();
            }

            // Handle errors and retry chunk loading
            window.onerror = function(msg, url, lineNo, columnNo, error) {
              if (url?.includes('/_next/') && 
                  (msg.includes('chunk') || msg.includes('Syntax'))) {
                retryLoadChunk(url);
              }
              return false;
            };

            // Handle script load failures
            window.addEventListener('error', function(event) {
              if (event.target?.tagName === 'SCRIPT') {
                const src = event.target.src;
                if (src.includes('/_next/')) {
                  retryLoadChunk(src);
                  event.preventDefault();
                }
              }
            }, true);
          `
        }} />