Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
IE11 url polyfilling doesn't help because new URL() is referenced in injected helpers
See original GitHub issue( 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");
__webpack_require__.$Refresh$.setup(module.id);
// !!! 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(
sourceRoot,
'oauth-dialog',
'oauth-dialog.ts'
),
// 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',
},
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:8 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
In case anyone wants to make this awesome plugin work with IE11 before the fix is ready, here’s my solution. Assuming you are using
HtmlWebpackPlugin, put this into the<head>element in your template:Works just fine with
webpack@5andwebpack-plugin-serve. I couldn’t getwebpack-dev-serverto work withwebpack@5, because the4-beta.0version doesn’t support IE11 due to https://github.com/webpack/webpack-dev-server/issues/2904 and related issues, and the latest stable version requirestarget: 'web'(see https://github.com/webpack/webpack-dev-server/issues/2758) andtarget: ['es5', 'web'](see webpackConfig.target docs) simultaneously to fix all the issues.Fixed in #278 🎉