Random chunk loading errors in production

[semiaddict]

Bug report

What is the current behavior?

I am using vue-cli, which uses Webpack in the background to build a vue3 library with multiple entries.
Shared vendor modules are output into separate chunks.
This works great in development, but I get errors related to dynamic chunk loading in random production builds.
I sometimes end up having to run the build process several times (without changing anything) before getting a working one.
I can't quite figure out what's causing this, and have tried moving to a single entry setup, but this didn't change anything.

The errors are also not always the same, and occur even though the chunk seems to be correctly loaded.
Here are some examples of the errors that occur:

• Uncaught (in promise) TypeError: e[r] is undefined
• ChunkLoadError: Loading chunk 'xx' failed (although I do see the chunk loading in the browser's network console)

I noticed that when the errors occur vendor chunks seem to not be minified, unlike in working builds.

If the current behavior is a bug, please provide the steps to reproduce.

Since the errors occur on random builds, I can't quite create a minimal reproduction example.

What is the expected behavior?

I expect production builds to be consistent and to have dynamic chunks not produce errors when loaded.

Other relevant information:
webpack version: 5.74.0
Node.js version: 16.17.0
Operating System: Debian 10 under WSL
Additional tools: vue-cli, CKEditorWebpackPlugin

Such cases seem to have been experienced by others using webpack (https://stackoverflow.com/questions/61090881/webpack-laravel-mix-chunk-error-typeerror-er-is-undefined, https://stackoverflow.com/questions/53704950/webpack-code-splitting-loading-chunk-failed-error-wrong-file-path), but are usually due to network/caching issues, which is not my case as I disabled caching in my browser all together and see the chunks loading fine in the network console.

This might be an issue in the Terser plugin, but I don't see any warning or errors when building.
Is there maybe a way to monitor the build process in a more verbose way that what is output by default ?

[alexander-akait]

Sorry, without more information it's hard to help, so I moved it to questions (if we found a bug we will convert it to an issue again).

Uncaught (in promise) TypeError: e[r] is undefined

Can you enable source maps and try to reproducie it? Maybe some libraries/packages use global variables/logic based on something external/enviroment. So we need to debug and found lines where you get this error.

[semiaddict]

Hi @alexander-akait,
Thanks for your response.

Here's one of the outputs I get in Chrome with source maps (they don't seem to work as well in Firefox):

bootstrap:19 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call')
    at n (bootstrap:19:32)
    at n.t (create fake namespace object:10:23)
n @ bootstrap:19
n.t @ create fake namespace object:10

Uncaught (in promise) TypeError: r.loadAnimation is not a function
    at Proxy.<anonymous> (LottieAnimationIcon.vue:34:31)
    at p (regeneratorRuntime.js:86:17)
    at Generator._invoke (regeneratorRuntime.js:66:24)
    at Generator.next (regeneratorRuntime.js:117:21)
    at r (asyncToGenerator.js:3:20)
    at s (asyncToGenerator.js:25:9)

The second error is related to a lottie component that is the one loading and using the vendor chunk.

And here's another one related to a CKEditor5 chunk:

Uncaught SyntaxError: Unexpected token '*' (at mylibrary.vendors.ckeditor.js:1202:2)

jsonp chunk loading:27 Uncaught (in promise) ChunkLoadError: Loading chunk 230 failed.
(missing: **/mylibrary.vendors.ckeditor.js)
    at n.f.j (jsonp chunk loading:27:18)
    at ensure chunk:6:25
    at Array.reduce (<anonymous>)
    at n.e (ensure chunk:5:56)
    at HtmlControl.vue:153:43
    at p (regeneratorRuntime.js:86:17)
    at Generator._invoke (regeneratorRuntime.js:66:24)
    at Generator.next (regeneratorRuntime.js:117:21)
    at r (asyncToGenerator.js:3:20)
    at s (asyncToGenerator.js:25:9)
n.f.j @ jsonp chunk loading:27
(anonymous) @ ensure chunk:6
n.e @ ensure chunk:5
(anonymous) @ HtmlControl.vue:153
p @ regeneratorRuntime.js:86
(anonymous) @ regeneratorRuntime.js:66
(anonymous) @ regeneratorRuntime.js:117
r @ asyncToGenerator.js:3
s @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
startEditing @ HtmlControl.vue:145
onButtonClick @ HtmlControl.vue:140
vn @ runtime-core.esm-bundler.js:155
gn @ runtime-core.esm-bundler.js:164
e @ runtime-dom.esm-bundler.js:373
Promise.then (async)
r @ asyncToGenerator.js:13
s @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
startEditing @ HtmlControl.vue:145
onButtonClick @ HtmlControl.vue:140
vn @ runtime-core.esm-bundler.js:155
gn @ runtime-core.esm-bundler.js:164
e @ runtime-dom.esm-bundler.js:373

Here are a few lines of mylibrary.vendors.ckeditor.js, which seem to cause the "Unexpected token":

function NC(e){var t=e.getSelectedElement();return t&&zC(t)?t:null}function LC(e){var t=e.getFirstPosition().parent;while(t){if(t.is("element")&&zC(t))return t;t=t.parent}return null}function zC(e){return!!e.getCustomProperty("table")&&Wd(e)}
/**
 * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */
var HC=function(e){(0,a.Z)(n,e);var t=(0,s.Z)(n);function n(){return(0,r.Z)(this,n),t.apply(this,arguments)}return(0,o.Z)(n,[{key:"afterInit",value:function(){var e=this.editor,t=e.t,n=e.plugins.get(Og),i=e.config.get("table.contentToolbar"),r=e.config.get("table.tableToolbar");i&&n.register("tableContent",{ariaLabel:t("Table toolbar"),items:i,getRelatedElement:LC}),r&&n.register("table",{ariaLabel:t("Table toolbar"),items:r,getRelatedElement:NC})}}],[{key:"requires",get:function(){return[Og]}},{key:"pluginName",get:function(){return"TableToolbar"}}]),n}(le),$C="underline",qC=function(e){(0,a.Z)(n,e);var t=(0,s.Z)(n);function n(){return(0,r.Z)(this,n),t.apply(this,arguments)}return(0,o.Z)(n,[{key:"init",value:function(){var e=this.editor;e.model.schema.extend("$text",{allowAttributes:$C}),e.model.schema.setAttributeProperties($C,{isFormatting:!0,copyOnEnter:!0}),e.conversion.attributeToElement({model:$C,view:"u",upcastAlso:{styles:{"text-decoration":"underline"}}}),e.commands.add($C,new Mf(e,$C)),e.keystrokes.set("CTRL+U","underline")}}],[{key:"pluginName",get:function(){return"UnderlineEditing"}}]),n}(le),WC='<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 18v-1.5h14V18zm2.2-8V3.6c0-.4.4-.6.8-.6.3 0 .7.2.7.6v6.2c0 2 1.3 2.8 3.2 2.8 1.9 0 3.4-.9 3.4-2.9V3.6c0-.3.4-.5.8-.5.3 0 .7.2.7.5V10c0 2.7-2.2 4-4.9 4-2.6 0-4.7-1.2-4.7-4z"/></svg>',UC="underline",jC=function(e){(0,a.Z)(n,e);var t=(0,s.Z)(n);function n(){return(0,r.Z)(this,n),t.apply(this,arguments)}return(0,o.Z)(n,[{key:"init",value:function(){var e=this,t=this.editor,n=t.t;t.ui.componentFactory.add(UC,(function(i){var r=t.commands.get(UC),o=new bc(i);return o.set({label:n("Underline"),icon:WC,keystroke:"CTRL+U",tooltip:!0,isToggleable:!0}),o.bind("isOn","isEnabled").to(r,"value","isEnabled"),e.listenTo(o,"execute",(function(){t.execute(UC),t.editing.view.focus()})),o}))}}],[{key:"pluginName",get:function(){return"UnderlineUI"}}]),n}(le),KC=function(e){(0,a.Z)(n,e);var t=(0,s.Z)(n);function n(){return(0,r.Z)(this,n),t.apply(this,arguments)}return(0,o.Z)(n,null,[{key:"requires",get:function(){return[qC,jC]}},{key:"pluginName",get:function(){return"Underline"}}]),n}(le),GC=n(17124),JC=function(){function e(t){(0,r.Z)(this,e),this.loader=t}return(0,o.Z)(e,[{key:"upload",value:function(){var e=(0,GC.b7)("assets_library"),t=e.uploadFiles;return this.loader.file.then((function(e){return t([e]).then((function(e){return{default:e[0].url}}))}))}}]),e}(),YC=function(e){(0,a.Z)(n,e);var t=(0,s.Z)(n);function n(e){var i;return(0,r.Z)(this,n),i=t.call(this,e),e.plugins.get("FileRepository").createUploadAdapter=function(e){return new JC(e)},i}return(0,o.Z)(n)}(le),QC=function(e){(0,a.Z)(n,e);var t=(0,s.Z)(n);function n(e,i){var o;return(0,r.Z)(this,n),o=t.call(this,e),o.view=i,o}return(0,o.Z)(n,[{key:"init",value:function(){var e=this.editor,t=this.view,n=e.editing.view,i=t.editable,r=n.document.getRoot();t.editable.name=r.rootName,t.render();var o=i.element;this.setEditableElement(i.name,o),this.focusTracker.add(o),t.editable.bind("isFocused").to(this.focusTracker),n.attachDomRoot(o),this._initPlaceholder(),this._initToolbar(),this.fire("ready")}},{key:"destroy",value:function(){var e=this.view,t=this.editor.editing.view;t.detachDomRoot(e.editable.name),e.destroy(),(0,Rt.Z)((0,Ft.Z)(n.prototype),"destroy",this).call(this)}},{key:"_initToolbar",value:function(){var e=this.editor,t=this.view,n=t.toolbar;n.fillFromConfig(e.config.get("toolbar"),this.componentFactory),Ih({origin:e.editing.view,originFocusTracker:this.focusTracker,originKeystrokeHandler:e.keystrokes,toolbar:n})}},{key:"_initPlaceholder",value:function(){var e=this.editor,t=e.editing.view,n=t.document.getRoot(),i=e.sourceElement,r=e.config.get("placeholder")||i&&"textarea"===i.tagName.toLowerCase()&&i.getAttribute("placeholder");r&&Am({view:t,element:n,text:r,isDirectHost:!1,keepOnFocus:!0})}}]),n}(ql),XC=function(e){(0,a.Z)(n,e);var t=(0,s.Z)(n);function n(e,i){var o,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return(0,r.Z)(this,n),o=t.call(this,e),o.toolbar=new Kc(e,{shouldGroupWhenFull:a.shouldToolbarGroupWhenFull}),o.editable=new hh(e,i,a.editableElement),o.toolbar.extendTemplate({attributes:{class:["ck-reset_all","ck-rounded-corners"],dir:e.uiLanguageDirection}}),o}return(0,o.Z)(n,[{key:"render",value:function(){(0,Rt.Z)((0,Ft.Z)(n.prototype),"render",this).call(this),this.registerChild([this.toolbar,this.editable])}}]),n}(lh),eZ=function(e){(0,a.Z)(n,e);var t=(0,s.Z)(n);function n(e){var i,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if((0,r.Z)(this,n),!(0,ge.Z)(e)&&void 0!==o.initialData)throw new b("editor-create-initial-data",null);i=t.call(this,o),void 0===i.config.get("initialData")&&i.config.set("initialData",tZ(e)),(0,ge.Z)(e)&&(i.sourceElement=e,jl((0,Re.Z)(i))),i.model.document.createRoot();var a=!i.config.get("toolbar.shouldNotGroupWhenFull"),s=new XC(i.locale,i.editing.view,{editableElement:i.sourceElement,shouldToolbarGroupWhenFull:a});return i.ui=new QC((0,Re.Z)(i),s),i}return(0,o.Z)(n,[{key:"destroy",value:function(){var e=this,t=this.getData();return this.ui.destroy(),(0,Rt.Z)((0,Ft.Z)(n.prototype),"destroy",this).call(this).then((function(){e.sourceElement&&Xi(e.sourceElement,t)}))}}],[{key:"create",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new Promise((function(i){if((0,ge.Z)(e)&&"TEXTAREA"===e.tagName)throw new b("editor-wrong-element",null);var r=new t(e,n);i(r.initPlugins().then((function(){return r.ui.init()})).then((function(){return r.data.init(r.config.get("initialData"))})).then((function(){return r.fire("ready")})).then((function(){return r})))}))}}]),n}(zl);function tZ(e){return(0,ge.Z)(e)?$i(e):e}function nZ(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.language,n=void 0===t?"fr":t,r=e.extraFonts,o=void 0===r?[]:r;return{language:n,plugins:[Oh,cf,Vf,qf,Xv,Sg,$p,iy,Py,zy,gw,wy,pw,Kw,Xw,ob,hb,tk,lk,Uk,Jp,Qk,l_,m_,k_,T_,R_,N_,MC,HC,KC,YC],toolbar:{items:["undo","redo","|","bold","italic","underline","strikethrough","subscript","superscript","|","heading","blockQuote","removeFormat","|","fontFamily","fontSize","fontColor","fontBackgroundColor","|","numberedList","bulletedList","outdent","indent","|","alignment","|","link","addBehaviorTrigger","uploadImage","insertTable","|","specialCharacters","sourceEditing"],shouldNotGroupWhenFull:!0},heading:{options:[{model:"paragraph",title:"Paragraph"},{model:"heading1",view:"h1",title:"Heading 1"},{model:"heading2",view:"h2",title:"Heading 2"},{model:"heading3",view:"h3",title:"Heading 3"},{model:"heading4",view:"h4",title:"Heading 4"},{model:"heading5",view:"h5",title:"Heading 5"},{model:"heading6",view:"h6",title:"Heading 6"},{model:"div",view:"div",title:"Division"},{model:"pre",view:"pre",title:"Preformatted"},{model:"address",view:"address",title:"Address"}]},fontFamily:{options:["default"].concat((0,i.Z)(o),["Arial, Helvetica, sans-serif","Courier New, Courier, monospace","Georgia, serif","Lucida Sans Unicode, Lucida Grande, sans-serif","Tahoma, Geneva, sans-serif","Times New Roman, Times, serif","Trebuchet MS, Helvetica, sans-serif","Verdana, Geneva, sans-serif"]),supportAllValues:!0},fontSize:{options:["default",8,9,10,11,12,14,16,18,20,22,24,26,28,36,48,72],supportAllValues:!0},image:{toolbar:["linkImage","|","imageStyle:inline","imageStyle:block","imageStyle:side","|","imageTextAlternative"]},table:{contentToolbar:["tableColumn","tableRow","mergeTableCells"]},htmlSupport:{allow:[{name:/^(div|a|p|i|em|b|strong|h[1-6]|span|big|small|q|cite|ins|del|var|samp|kbd|code|tt)$/,classes:!0,styles:!0,attributes:{dir:/^(rtl|ltr)$/}},{name:"a",attributes:{target:"_blank",rel:/^(noopener|nofollow)$/}}],disallow:[]}}}se(eZ,Ul)}}]);
//# sourceMappingURL=metaScore.vendors.ckeditor.js.mapote that because {@link module:engine/view/observer/tabobserver~TabObserver} is attached by the
 * {@link module:engine/view/view~View}, this event is available by default.
 *
 * @event module:engine/view/document~Document#event:tab
 *
 * @param {module:engine/view/observer/domeventdata~DomEventData} data
 */



;// CONCATENATED MODULE: ./node_modules/@ckeditor/ckeditor5-engine/src/view/view.js

We can see here that a sourceMappingURL comment is being inserted in a strange place, cutting a comment off.
The comment seems to comes from this line in CKEditor.

I am starting to think the problem could come from module concatenation or source maps.

P.S: I replaced local paths in the errors and excerpt with "**" and renamed references of my library to "mylibrary".

[semiaddict]

@alexander-akait,
Would you happen to know what could cause build files to differ from a build to another when nothing is modified in the source files or configs ?

[tommypepsi]

@semiaddict sorry it's been a long while and it's really fuzzy in my memory what we did there. Our build tools changed a lot since then.

I might be remembering wrong so take this with a grain of salt but from what I remember I think it was related to a cache issue. We had to change a setting somewhere (sorry can't remember what it was) that was adding a build variable or something unique to the url like /my-file.js?v=123456.

But again not sure if that was the same issue or if I'm just remembering wrong.

[semiaddict]

@tommypepsi, thank you for your response. I don't think I have any build specific variables that change, so it might not be related after all.

@alexander-akait, I managed to highly reduce my codebase and still reproduce the error.
It, however, occurs much less often with the reduced codebase, so I had to run the build script about 20 times to get a broken build.
Attached is an archive containing both a working build and a corrupt one.
You will notice that the files metaScore.Editor.css, metaScore.vendors.lottie.js, and metaScore.vendors.lottie.js.map are different in the two builds. The last two files are actually very different, with both having extra content appended to them.

random-chunk-loading-errors.zip

I'm also attaching the reduced codebase in case this can help, but please note that you won't be able to actually test the build as it requires access to a CMS. You should however be able to run the build script and check if metaScore.vendors.lottie.js is malformatted.

reduced-codebase.zip

[alexander-akait]

@semiaddict Can you collect all non official plugins and try to enable/disable them, I think bug somewhere here (especial you can start with plugins which working with chunks)

[semiaddict]

@alexander-akait, thank you for your reply and sorry for the delayed answer!
I have tried disabling all non-necessary plugins, but the issue persists.
Are there any webpack debugging tools that could help me figure out what stage of the build is causing the malformed scripts ?

[semiaddict]

It seems that my custom splitChunks.cacheGroups setting was at cause here.
I thought I had already tried to remove it before, but now I seem to be able to build fine if I remove that setting.
I don't know what's wrong with it, but I can live without it :)

Thank you @alexander-akait and @tommypepsi for your help!

[rosychuk]

Users were intermittently getting chunk load errors in the Dev and Staging environments after deployments. I couldn't find any differences in the deployments when comparison to the Production environment, which has never had these errors.

When viewing the calls in the DevTools, I could see 404 not found responses, but the files that were "not found", did exist in the Dist folder on the application server.

My issue turned out to be security related. When comparing the list of accounts under site security between Production vs Dev and Staging, I noticed I had missed adding the general Users group to the sites on both the Dev and Staging sites.

Adding the Users group to each site with default security resolved the chunk load errors for me.