Multiple independent webpack bundles: chunks load not working correctly

Question

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

• two webpack bundles, generated from two different projects: the IDE and the App .
• They are both ReactJS based (although I don't think this matters).
• The IDE is webpack 2.x based while the App is older (still webpack 1.x)
• no explicit dependency from one bundle to the other (no "import")
• both bundles expose a global function to be inited.
• the IDE is using webpack CommonsChunkPlugin, but removing it isn't fixing the issue (as reported at Webpack config for Code splitting not working for production build ).

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?

Answer 1

您应该为每个包配置output.jsonpFunction属性。