For a pretty large Web application I want to run multiple instances of Webpack (Encore) on the same page. When I put all the source code into a single Webpack configuration it all works. However when I have two different configurations with the same source code I always get errors like this:

lib.84f46ab6.js:19 Uncaught TypeError: __webpack_require__.n is not a function
    at Object../assets/js/lib.js (lib.84f46ab6.js:19)
    at __webpack_require__ (bootstrap:19)
    at __webpack_exec__ (codemirror.css?f2af:1)
    at codemirror.css?f2af:1
    at Function.__webpack_require__.O (chunk loaded:25)
    at codemirror.css?f2af:1
    at webpackJsonpCallback (jsonp chunk loading:36)
    at Array.forEach (<anonymous>)
    at jsonp chunk loading:49
    at runtime.7c0b88c9.js:146

After some research I found an article about the issue here: /@cliffers/how-to-run-multiple-webpack-instances-on-the-same-page-and-avoid-any-conflicts-4e2fe0f016d1

It basically says:

Webpack does not run in the global namespace…so whats causing the issue? Its a webpack plugin called CommonsChunkPlugin which is used for ansyc on demand loading of code via JSONP. The plugin registers and uses a global function named window.webpackJsonp and thats where conflict occurs.

Simply change the name of the webpackJsonp function for at least one on the webpack instances running and the conflict is resolved.

But they have removed this function in Webpack 5 and I still can not figure out how to configure this correctly. Does anybody know how to solve this with the most recent version of Webpack Encore (currently 1.1.2)?

Part of my config:

// ...
const libConfig = Encore.getWebpackConfig();

// ...

// build the second configuration
const appConfig = Encore.getWebpackConfig();

appConfig.name = 'appConfig';

// Export the final configuration
module.exports = [libConfig,appConfig]

This is how multiple configurations are basically configured in Encore: .html

For a pretty large Web application I want to run multiple instances of Webpack (Encore) on the same page. When I put all the source code into a single Webpack configuration it all works. However when I have two different configurations with the same source code I always get errors like this:

lib.84f46ab6.js:19 Uncaught TypeError: __webpack_require__.n is not a function
    at Object../assets/js/lib.js (lib.84f46ab6.js:19)
    at __webpack_require__ (bootstrap:19)
    at __webpack_exec__ (codemirror.css?f2af:1)
    at codemirror.css?f2af:1
    at Function.__webpack_require__.O (chunk loaded:25)
    at codemirror.css?f2af:1
    at webpackJsonpCallback (jsonp chunk loading:36)
    at Array.forEach (<anonymous>)
    at jsonp chunk loading:49
    at runtime.7c0b88c9.js:146

After some research I found an article about the issue here: https://medium./@cliffers/how-to-run-multiple-webpack-instances-on-the-same-page-and-avoid-any-conflicts-4e2fe0f016d1

It basically says:

Webpack does not run in the global namespace…so whats causing the issue? Its a webpack plugin called CommonsChunkPlugin which is used for ansyc on demand loading of code via JSONP. The plugin registers and uses a global function named window.webpackJsonp and thats where conflict occurs.

Simply change the name of the webpackJsonp function for at least one on the webpack instances running and the conflict is resolved.

But they have removed this function in Webpack 5 and I still can not figure out how to configure this correctly. Does anybody know how to solve this with the most recent version of Webpack Encore (currently 1.1.2)?

Part of my config:

// ...
const libConfig = Encore.getWebpackConfig();

// ...

// build the second configuration
const appConfig = Encore.getWebpackConfig();

appConfig.name = 'appConfig';

// Export the final configuration
module.exports = [libConfig,appConfig]

This is how multiple configurations are basically configured in Encore: https://symfony./doc/current/frontend/encore/advanced-config.html

• javascript
• webpack
• configuration
• jsonp
• webpack-encore

Share Improve this question Follow edited Aug 8, 2022 at 13:48 Yves M. 31.1k2424 gold badges109109 silver badges149149 bronze badges asked May 14, 2021 at 22:43 BlackbamBlackbam 19.5k3131 gold badges111111 silver badges165165 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Finally I solved it by adding the following setting to the configuration:

appConfig.output.chunkLoadingGlobal = 'appConfigChunkLoadingGlobal'

As simple as that. It makes sure that the global Webpack function for loading the chunks does not have the same name for both configs. It is the replacement for the old webpackJsonp function.