Ask questionsIE11 url polyfilling doesn't help because new URL() is referenced in injected helpers

( cc @pmmmwh )

I am using this plugin (0.4.3 latest version as of today) to support fast refresh in an IE11 environment, in conjunction with webpack@5 and webpack serve (ex. webpack-dev-server).

I took all precaution to inject all the necessary polyfills by having a polyfill chunk in my <head>, which includes the polyfill for url.

That's the source code of the chunk, it is of course compiled to ES5 by Babel.

// IE11 - One Love 💕
// -
import 'core-js/stable'; // URL polyfill is included here, I also tried adding `url-polyfill` but it makes no difference (no surprise).
import 'regenerator-runtime/runtime';

It resides in a chunk called evil-decrepit-browsers-polyfill which, as I mentioned, is the first chunk injected into my index.html - nothing ever gets before it.

The problem is that dev server in the hot mode (I use a combination of inline and hot) injects react-refresh runtime and helpers even to this chunk!

(function(module, __unused_webpack_exports, __webpack_require__) {
/* provided dependency */ var __react_refresh_utils__ = __webpack_require__(/*! ../../node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js */ "../../node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js");

/* provided dependency */ var __react_refresh_error_overlay__ = __webpack_require__(/*! ../../node_modules/@pmmmwh/react-refresh-webpack-plugin/overlay/index.js */ "../../node_modules/@pmmmwh/react-refresh-webpack-plugin/overlay/index.js");

__webpack_require__.$Refresh$.runtime = __webpack_require__(/*! ../../node_modules/react-refresh/runtime.js */ "../../node_modules/react-refresh/runtime.js");

// !!! My URI polyfilling is now below this code! !!!

And during the invocation of this injected code at the top I get an error in getSocketUrlParts(resourceQuery):


Object doesn't support this action

I confirm that the error happens because I haven't had a chance to polyfill this yet at the moment of code execution.

Using the below configuration doesn't help

                  new ReactRefreshWebpackPlugin({
                      exclude: /(node_modules|evil-decrepit-browsers-polyfill)/,

This is a vicious cycle, the helpers seem to be injected into every file and I can't polyfill before the injected code executes.

Any thoughts?

If this is relevant, here are some other parts of my webpack configuration:

entry: {
        taskpane: path.resolve(sourceRoot, 'taskpane', 'index.tsx'),
        'oauth-dialog': path.resolve(
        // Separate entry point injected by html-webpack-plugin and HtmlWebpackInjector as the SOLE entry in the <head>, 
        // even before the 'runtime' chunk. Before any other chunks, for that matter. But it doesn't help :)
        // -
        'evil-decrepit-browsers-polyfill_head': '@velixo/web-polyfill',
    optimization: {
        splitChunks: {
            chunks: 'all',
        runtimeChunk: 'single',

Answer questions wh1t3cAt1k

Perhaps some sort of configuration option to exclude a particular entry (i.e. polyfill) from processing altogether?

Github User Rank List