Unhandled Runtime Error：ChunkLoadError: Loading chunk app/layout failed.

[zhangwei900808]

Link to the code that reproduces this issue

https://github.com/zhangwei900808/next-issue-demo

To Reproduce

1、clone project 2、pnpm install 3、pnpm 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: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: N/A
  pnpm: 7.29.1
Relevant Packages:
  next: 14.2.2 // Latest available version is detected (14.2.2).
  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) are affected? (Select all that apply)

Not sure

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

next dev (local)

Additional context

No response

[kilimanjjjaro]

Same here!

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[reynaldomarchell]

Are you have solved this problem? I just got the same problem here...

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[SeongYeongJu]

I'm having the same issue.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[wadenarel]

[petejodo]

Edit apologies, my remarks are based on this same error I'm seeing in my application, not the reproduction here

when looking at the chunk, it seems like it doesn't complete downloading e.g. the line/character the error is occurring on for me is inconsistent but it's always seemingly cutoff at the end e.g.

"use strict";
eval(__webpack_require__.ts("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   startResourceCollection: function() { return /* binding */ startResourceCollection; }\n/* harmony export */ });\n/* harmony import */ var _datadog_browser_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @datadog/browser-core */ \"(app-pages-browser)/./node_modules/@datadog/browser-core/esm/tools/utils/timeUtils.js\");\n/* harmony import */ var _datadog_browser_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @datadog/browser-core */ \"(app-pages-browser)/./node_modules/@datadog/browser-core/esm/tools/mergeInto.js\");\n/* harmony import */ var _datadog_browser_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @datadog/browser-core */ \"(app-pages-browser)/./node_modules/@datadog/browser-core/esm/tools/utils/stringUtils.js\");\n/* harmony import */ var _datadog_browser_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @datadog/browser-core */ \"(app-pages-browser)/./node_modules/@datadog/browser-core/esm/tools/utils/polyfills.js\");\n/* harmony import */ var _datadog_browser_core__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @datadog/browser-core */ \"(app-pages-browser)/./node_modules/@datadog/browser-core/esm/tools/utils/numberUtils.js\");\n/* harmony import */ var _datadog_browser_core__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @datadog/browser-core */ \"(app-pages-browser)/./node_modules/@datadog/browser-core/esm/tools/experimentalFeatures.js\");\n/* harmony import */ var _browser_performanceCollection__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../browser/performanceCollection */ \"(app-pages-browser)/./node_modules/@datadog/browser-rum-core/esm/browser/performanceCollection.js\");\n/* harmony import */ var _matchRequestTiming__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./matchRequestTiming */ \"(app-pages-browser)/./node_modules/@datadog/browser-rum-core/esm/domain/resource/matchRequestTiming.js\");\n/* harmony import */ var _resourceUtils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./resourceUtils */ \"(app-pages-browser)/./node_modules/@datadog/browser-rum-core/esm/domain/resource/resourceUtils.js\");\n\n\n\n\nfunction startResourceCollection(lifeCycle, configuration, sessionManager, pageStateHistory) {\n    lifeCycle.subscribe(6 /* LifeCycleEventType.REQUEST_COMPLETED */, function (request) {\n        var rawEvent = processRequest(request, configuration, sessionManager, pageStateHistory);\n        if (rawEvent) {\n            lifeCycle.notify(10 /* LifeCycleEventType.RAW_RUM_EVENT_COLLECTED */, rawEvent);\n        }\n    });\n    lifeCycle.subscribe(0 /* LifeCycleEventType.PERFORMANCE_ENTRIES_COLLECTED */, function (entries) {\n        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {\n            var entry = entries_1[_i];\n            if (entry.entryType === _browser_performanceCollection__WEBPACK_IMPORTED_MODULE_0__.RumPerformanceEntryType.RESOURCE && !(0,_resourceUtils__WEBPACK_IMPORTED_MODULE_2__.isRequestKind)(entry)) {\n                var rawEvent = processResourceEntry(entry, configuration, sessionManager, pageStateHistory);\n                if (rawEvent) {\n                    lifeCycle.notify(10 /* LifeCycleEventType.RAW_RUM_EVENT_COLLECTED */, rawEvent);\n                }\n            }\n        }\n    });\n}\nfunction processRequest(request, configuration, sessionManager, pageStateHistory) {\n    var _a;\n    var matchingTiming = (0,_matchRequestTiming__WEBPACK_IMPORTED_MODULE_1__.matchRequestTiming)(request);\n    var startClocks = matchingTiming ? (0,_datadog_browser_core__WEBPACK_IMPORTED_MODULE_3__.relativeToClocks)(matchingTiming.startTime) : request.startClocks;\n    var shouldIndex = shouldIndexResource(configuration, sessionManager, startClocks);\n    var tracingInfo = computeRequestTracingInfo(request, configuration);\n    if (!shouldIndex && !tracingInfo) {\n        return;\n    }\n    var type = request.type === \"xhr\" /* RequestType.XHR */ ? \"xhr\" /* ResourceType.XHR */ : \"fetch\" /* ResourceType.FETCH */;\n    var correspondingTimingOverrides = matchingTiming ? computePerformanceEntryMetrics(matchingTiming) : undefined;\n    var duration = computeRequestDuration(pageStateHistory, startClocks, request.duration);\n    var pageStateInfo = computePageStateInfo(pageStateHistory, startClocks, (_a = matchingTiming === null || matchingTiming === void 0 ? void 0 : matchingTiming.duration) !== null && _a !== void 0 ? _a : request.duration);\n    var resourceEvent = (0,_datadog_browser_core__WEBPACK_IMPORTED_MODULE_4__.combine)({\n        date: startClocks.timeStamp,\n        resource: {\n            id: (0,_datadog_browser_core__WEBPACK_IMPORTED_MODULE_5__.generateUUID)(),\n            type: type,\n            duration: duration,\n            method: request.method,\n            status_code: request.status,\n            url: request.url,\n        },\n        type: \"resource\" /* RumEventType.RESOURCE */,\n        _dd: {\n            discarded: !shouldIndex,\n        },\n    }, tracingInfo, correspondingTimingOverrides, pageStateInfo);\n    return {\n        startTime: startClocks.relative,\n        rawRumEvent: resourceEvent,\n        domainContext: {\n            performanceEntry: matchingTiming,\n            xhr: request.xhr,\n            response: request.response,\n            requestInput: request.input,\n            requestInit: request.init,\n            error: request.error,\n        },\n    };\n}\nfunction processResourceEntry(entry, configuration, sessionManager, pageStateHistory) {\n    var startClocks = (0,_datadog_browser_core__WEBPACK_IMPORTED_MODULE_3__.relativeToClocks)(entry.startTime);\n    var shouldIndex = shouldIndexResource(configuration, sessionManager, startClocks);\n    var tracingInfo = computeEntryTracingInfo(entry, configuration);\n    if (!shouldIndex && !tracingInfo) {\n        return;\n    }\n    var type = (0,_resourceUtils__WEBPACK_IMPORTED_MODULE_2__.computeResourceKind)(entry);\n    var entryMetrics = computePerformanceEntryMetrics(entry);\n    var pageStateInfo = computePageStateInfo(pageStateHistory, startClocks, entry.duration);\n    var resourceEvent = (0,_datadog_browser_core__WEBPACK_IMPORTED_MODULE_4__.combine)({\n        date: startClocks.timeStamp,\n        resource: {\n            id: (0,_datadog_browser_core__WEBPACK_IMPORTED_MODULE_5__.generateUUID)(),\n            type: type,\n            url: entry.name,\n        },\n        type: \"resource\" /* RumEventType.RESOURCE */,\n        _dd: {\n            discarded: !shouldIndex,\n        },\n    }, tracingInfo, entryMetrics, pageStateInfo);\n    return {\n        startTime: startClocks.relative,\n        rawRumEvent: resourceEvent,\n        domainContext: {\n            performanceEntry: entry,\n        },\n    };\n}\nfunction shouldIndexResource(configuration, sessionManager, resourceStart) {\n    return configuration.trackResources && sessionManager.findTrackedSession(resourceStart.relative);\n}\nfunction computePerformanceEntryMetrics(timing) {\n    return {\n        resource: (0,_datadog_browser_core__WEBPACK_IMPORTED_MODULE_6__.assign)({\n            duration: (0,_resourceUtils__WEBPACK_IMPORTED_MODULE_2__.computePerformanceResourceDuration)(timing),\n            size: (0,_resourceUtils__WEBPACK_IMPORTED_MODULE_2__.computeSize)(timing),\n        }, (0,_resourceUtils__WEBPACK_IMPORTED_MODULE_2__.computePerformanceResourceDetails)(timing)),\n    };\n}\nfunction computeRequestTracingInfo(request, configuration) {\n    var hasBeenTraced = request.traceSampled && request.traceId && request.spanId;\n    if (!hasBeenTraced) {\n        return undefined;\n    }\n    return {\n        _dd: {\n            span_id: request.spanId.toDecimalString(),\n            trace_id: request.traceId.toDecimalString(),\n            rule_psr: getRulePsr(configuration),\n        },\n    };\n}\nfunction computeEntryTracingInfo(entry, configuration) {\n    var hasBeenTraced = entry.traceId;\n    if (!hasBeenTraced) {\n        return undefined;\n    }\n    return {\n        _dd: {\n            trace_id: entry.traceId,\n            rule_psr: getRulePsr(configuration),\n        },\n    };\n}\n/**\n * @returns number between 0 and 1 which represents trace sample rate\n */\nfunction getRulePsr(configuration) {\n    return (0,_datadog_browser_core__WEBPACK_IMPORTED_MODULE_7__.isNumber)(configuration.traceSampleRate) ? configuration.traceSampleRate / 100 : undefined;\n}\nfunction computePageStateInfo(pageStateHistory, startClocks, duration) {\n    if (!(0,_datadog_browser_core__WEBPACK_IMPORTED_MODULE_8__.isExperimentalFeatureEnabled)(_datadog_browser_core__WEBPACK_IMPORTED_MODULE_8__.ExperimentalFeature.RESOURCE_PAGE_STATES)) {\n        return;\n    }\n    return {\n        _dd: {\n            page_states: pageStateHistory.findAll(startClocks.relative, duration),\n            page_was_discarded: String(document.wasDiscarded),\n        },\n    };\n}\nfunction computeRequestDuration(pageStateHistory, startClocks, duration) {\n    var _a;\n    var requestCrossedFrozenState = (_a = pageStateHistory\n        .findAll(startClocks.relative, duration)) === null || _a === void 0 ? void 0 : _a.some(function (pageState) { return pageState.state === \"frozen\" /* PageState.FROZEN */; });\n    return !requestCrossedFrozenState ? (0,_datadog_browser_core__WEBPACK_IMPORTED_MODULE_3__.toServerDuration)(duration) : undefined;\n}\n//# sourceMappingURL=resourceCollection.js.map//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL25vZGVfbW9kdWxlcy9AZGF0YWRvZy9icm93c2VyLXJ1bS1jb3JlL2VzbS9kb21haW4vcmVzb3VyY2UvcmVzb3VyY2VDb2xsZWN0aW9uLmpzIiwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7QUFBd0s7QUFDMUY7QUFDcEI7QUFDZ0c7QUFDbko7QUFDUDtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsS0FBSztBQUNMO0FBQ0EsOENBQThDLHVCQUF1QjtBQUNyRTtBQUNBLG9DQUFvQyxtRkFBdUIsY0FBYyw2REFBYTtBQUN0RjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxLQUFLO0FBQ0w7QUFDQTtBQUNBO0FBQ0EseUJBQXlCLHVFQUFrQjtBQUMzQyx1Q0FBdUMsdUVBQWdCO0FBQ3ZEO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLHdCQUF3Qiw4REFBTztBQUMvQjtBQUNBO0FBQ0EsZ0JBQWdCLG1FQUFZO0FBQzVCO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxTQUFTO0FBQ1Q7QUFDQTtBQUNBO0FBQ0EsU0FBUztBQUNULEtBQUs7QUFDTDtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLFNBQVM7QUFDVDtBQUNBO0FBQ0E7QUFDQSxzQkFBc0IsdUVBQWdCO0FBQ3RDO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxlQUFlLG1FQUFtQjtBQUNsQztBQUNBO0FBQ0Esd0JBQXdCLDhEQUFPO0FBQy9CO0FBQ0E7QUFDQSxnQkFBZ0IsbUVBQVk7QUFDNUI7QUFDQTtBQUNBLFNBQVM7QUFDVDtBQUNBO0FBQ0E7QUFDQSxTQUFTO0FBQ1QsS0FBSztBQUNMO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxTQUFTO0FBQ1Q7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxrQkFBa0IsNkRBQU07QUFDeEIsc0JBQXNCLGtGQUFrQztBQUN4RCxrQkFBa0IsMkRBQVc7QUFDN0IsU0FBUyxFQUFFLGlGQUFpQztBQUM1QztBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxTQUFTO0

at first I went down the rabbit hole of thinking it had to do with datadog's packages but that isn't the case. I said the line/character number being inconsistent which is true but there is some order to it. The error was always occurring when loading datadog chunks. I tried removing datadog to see if the error went away but it didn't and instead occurred on another dependency (zod in my case) and consistently errored on that dependency.

Also reproducing the error was difficult but I got it reproducing roughly majority of the time by doing an "empty cache and hard reload" refresh in chrome.

Confirmed error also occurs in Firefox with "Uncaught SyntaxError: "" literal not terminated before end of script"

[petejodo]

Edit apologies, my remarks are based on this same error I'm seeing in my application, not the reproduction here

can also confirm that it seems to only occur when export const runtime = "edge" is in app/layout.ts. Removing that removed that error

[and-sm]

I have the same error, occurs only in dev mode.

[dgrimaldi-intellyse]

I have the same error, occurs only in dev mode.

possible way to mitigate it https://github.com/vercel/next.js/issues/66526

[JPinheiro93]

I had a similar issue. For me, the problem was that I had JSX attributes as single quote strings in the Root Layout:

Before: <html lang='en'>

After: <html lang={"en"}>

And the issue is gone.

I'm using next v14.2.4, with app router.

When using single quote strings anywhere else in my code is fine, but somehow in these HTML tags it's not 🤷

[aryaadinulfadlan]

also facing same issue, any solution there?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[Haseebshah936]

I just got this error in production occurred only once so far but still is there any solution.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[Haseebshah936]

@zhangwei900808 hi did you find any solution for this issue. I having the same issue on both local and production. So far in production it only happed once.