Webpack error, Loading chunk failed

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!

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.

Read More:   Create File with Google Drive Api v3 (javascript)

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!

This might be a cross site scripting problem.
Make sure that myapp.com sets the correct headers.

On myapp.com, set this header:

Access-Control-Allow-Origin: https://domainA.com

You should also make sure, that your script tag has async set to false:

<script async="false" …

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts