Menu
Stack: Webpack 4.16.0, Node8, Vuejs2
I am seeing the below error, whilst serving my Vuejs application.
Error: Loading chunk 4 failed. (missing: https://myapp.com/ui.chunk.bundle.js) at HTMLScriptElement.s (demo:1) This error is consistent across builds, the actual file itself is accesible via the URL.
I am using code splitting via import() and the initial app loads fine, but then the flow will break when another chunk is loaded, it can also vary between ui.chunk.bundle.js & vendors~ui.chunk.bundle.js.
When building for production, a new error is shown, but it seems related as also linked to loading modules:
demo:1 TypeError: Cannot read property 'call' of undefined at o (demo:1) at Object.349 (ui.chunk.bundle.js:1) at o (demo:1) at o.t (demo:1) I have tried upgrading webpack and babel, but am at a loss as to what this could be down to as it was working perfectly fine before.
When running the application on my local machine and not Google App Engine, everything seems fine.
How the app is loaded: It is loaded into other website via a script tag, so domainA.com runs the script tag which calls myapp.com/js and the flow begins, i.e the app loads various chunks based on some logic.
When accessing the webpack generated index page bundle at myapp.com everything loads correctly.
Please help!
966
A "ChunkLoadError" generally means that a checksum failed for a javascript file. These errors occur when the browser requests a JS code chunk, and receives a response whose checksum does not match the expected “integrity=…” attribute associated with the <script> tag that refers to it.
Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child).
chunk. js represents all the libraries used in our application. It's essentially all the vendor codes imported from the node_modules folder. Main.
chunk. js files are for third-party libraries like the react , axios , and formik library code that is imported to the application. Code splitting technique will also create a chunk. js file, so you need to check the file and see if the chunk is for node_modules code or your application code. There's also one chunk.
That is rather deep and surely not easily fixed in two steps, best you create a new project using cli, if convenient with recommended presets, and if it still persist check the npm packages you installed and make sure none of them are discontinued and are up-to-date at least according to your version of vue.
120
Its might be due to "webpack.config.js" where you can just try with updating output object
module.exports = { output: { chunkFilename: '[id].chunk.[chunkhash].js', } }; Hope it should work!
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
