Webpack error, Loading chunk failed

Question

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!

were you able to find something useful in fixing this error? — David Lartey
– David Lartey, Commented Jul 30, 2019 at 14:14
Do you have filenameHashing disabled? Then the browser might load an old (cached) version of the JS files. Had run into the same problem a while ago.. — Matthijs
– Matthijs, Commented Mar 16, 2020 at 12:43
I think Webpack 4 made non-existent imports a warning instead of an error, stackoverflow.com/questions/40071942/… — Atav32
– Atav32, Commented Jan 23, 2021 at 21:56

UPanda · Accepted Answer · 2020-11-17 19:33:29Z

1

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.

answered Nov 17, 2020 at 19:33

UPanda

1191 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user6021938user6021938 · Accepted Answer · 2020-12-21 11:01:50Z

1

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!

answered Dec 21, 2020 at 11:01

user6021938

Comments

Michael2 · Accepted Answer · 2019-12-01 21:06:31Z

-1

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

answered Dec 1, 2019 at 21:06

Michael2

9304 silver badges17 bronze badges

Collectives™ on Stack Overflow

Webpack error, Loading chunk failed

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related