keul
keul

Reputation: 7819

Multiple independent webpack bundles: chunks load not working correctly

I've an environment composed by two independent projects that can be described as follows:

Both the IDE and the App must be used from a 3rd party JavaScript environment. It will call window.initIDE and window.initApp when needed. There's no explicit dependency because IDE and App must still work if the other is missing, so JS inclusion in the page is something like:

<script src=".../app.js" />
<script src=".../ide.js" />

This environment worked normally for a long time. The IDE is based on react-boilerplate so it used chunks and code splitting from the beginning.

Recently we added JS chunks also in the App by using react-loadable.

While both IDE and App works as expected when only one of them is used on the page, chunks are not loaded if we activate both App and IDE: the last library that is used is the one that will not load chunks, while the first works as expected.

Inspecting the network tab of the browser we see no activity on loading chunks of the second called lib at all.

Obviously we get errors: Tracebacks are similar for both IDE and App:

Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
    at __webpack_require__

Inspecting __webpack_require__:

modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

While modules is an array of all modules available, there's no modules[moduleId] because moduleId refers to an invalid index (probably because it has not been loaded... but why?)

I always believed that webpack internal implementation was not globally exposed outside the bundle build, but somehow this does not seem true.

How can a bundle interfere with the other? Why chunks are not loaded? Any suggestion on how to fix this issue?

Upvotes: 3

Views: 2493

Answers (1)

Serge Seredenko
Serge Seredenko

Reputation: 3541

You should configure output.jsonpFunction property for each bundle.

Upvotes: 4

Related Questions