Have same issue, but i have multiple scripts on page built with different versions of webpack. Could it be the issue?

You should choose a unique jsonp function anyway with output.jsonpFunction.

The issue

Our issue, having Webpack 3 and 4 outputs on the same page. Since Webpack 4 uses an array instead of a function.

Solution

Change output.jsonpFunction value to something else than webpackJsonP.

We ran across this today after intermittent user reports on Evite.com of pages not loading. After inspection looks like third party code loaded something with webpack3, but that’s not yet proven. It was intermittent for us and I didn’t get my hands on a device that could reproduce it.

Basically, anybody running 3rd party code should use output.jsonpFunction to avoid conflicts. Thanks for this bug, I would not have found that configuration option on my own - jsonpFunction would not have caught my eye, since I was not looking for anything to do with jsonp or a function.

I would agree the default should be changed so more people don’t run into this.

I’ve found output.jsonpFunction, hope it helps

Guys, here is an example of this failure: https://twitter.com/stripestatus/status/1179172007218274304

Some additional details here: sites utilizing Webpack on the front-end likely encountered errors as Stripe.js overwrote the global webpackJsonp object.

@Legends I’m not sure I can reproduce this issue in a new project, but I will add it here a little later

Fixed in webpack@5 for libraries and standalone apps, we added uniqueName https://github.com/webpack/webpack/blob/master/lib/config/defaults.js#L550, feel free to feedback

This issue broke one of two apps which shared a page for us, even though we set an output.library. Setting an explicit otuput.jsonpFunction helped, but I’m not sure if that should be the case.

Should the library name also automatically be appended to the output.jsonpFunction if the output.library is an array?

This isn’t done because the library is checked for being a string in https://github.com/webpack/webpack/blob/9741565588c64f82d942ec1096f0296ffd9443f4/lib/WebpackOptionsDefaulter.js#L120-L124 https://github.com/webpack/webpack/blob/9741565588c64f82d942ec1096f0296ffd9443f4/lib/Template.js#L68

It was not obvious to me that I have to manually set an output.jsonpFunction when using an array-type output.library. It’s not mentioned as an exception on https://webpack.js.org/configuration/output/#outputjsonpfunction either.

For reference: this is the relevant config part in broken form:

	output: {
        path: paths.clientOutputDirectory,
        filename: 'fragment.js',
        library: ['fragments', name],
        libraryTarget: 'umd',
        globalObject: "(typeof self != 'undefined' ? self : this)",
    },

and fixed:

	output: {
        path: paths.clientOutputDirectory,
        filename: 'fragment.js',
        library: ['fragments', name],
        libraryTarget: 'umd',
        globalObject: "(typeof self != 'undefined' ? self : this)",
        jsonpFunction: `webpackJsonp_${name}`,
    },

I found that, i’m unable to use webpack2/3 bundled scripts together with webpack 4 project, because they replace window[“webpackJsonp”] array with function and brokes things down.

That’s so frustrating me now. I can’t control third party webpack version…

Thanks @sokra , rename output.jsonpFunction to a different string fixes the error here. But this only works I own the code. I could see cases user have no choice when introducing libraries from other vendors. Reminds me Array.prototype.includes vs MooTools

I am vigilant seeing this as webpack4 seems breaks the existing web by re-patching window object here. I think it is worth an analysis here. In any case, the master’s work is awesome.

With great power comes great responsibility