IE 11: broken with webpackHotDevClient. #998
Comments
|
I think I'm seeing now that create-react-app doesn't support IE 11 or less anymore by default, but there is an opt-in with a separate package. Maybe this is just a documentation thing? If so I will try to update. |
|
I now see the docs about polyfills were updated for v3. However, I don't think this resolves the issue. It appears something similar is being tracked in CRA: facebook/create-react-app#5336. That one is related to All these things about supporting IE 9-11 are about polyfilling though. I don't think a polyfill can fix an arrow function. The code just isn't transpiled for older browsers and I don't see how that can be fixed without updating the dependency itself. |
|
This is also an issue with |
|
There's two things you have to solve for here:
|
|
I still don't get what's needed to change to make it work for IE 11. Even my whole production bundle now contains |
|
This got things working for me: |
|
kinda annoying |
|
You can follow below to resolve your issue: Update package.json with below browserlist to get it working for IE: "browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"last 2 ie version"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"last 2 ie version"
]
},This way you will at-least get it complied your code without |
|
I have tried many solutions around this issue . Below is my package json file. { |
|
My solution of this problem was the following (note that on Windows you need
'use strict';
// The list was taken from
// https://github.com/styleguidist/react-styleguidist/pull/1327#issuecomment-483928457
// the regex is changed to work both on Windows and Linux
const ieRule = {
test: /\.jsx?$/,
include: new RegExp(
`node_modules[/|\\\\](?=(${[
'acorn-jsx',
'estree-walker',
'regexpu-core',
'unicode-match-property-ecmascript',
'unicode-match-property-value-ecmascript',
'react-dev-utils',
'ansi\-styles',
'ansi-regex',
'chalk',
'strip-ansi'
].join('|')}))`
),
use: {
loader: "babel-loader",
options: {
presets: [["@babel/preset-env", { targets: { ie: 11 } }]]
}
}
};
module.exports = {
modify: (config, { target, dev }, webpack) => {
// full config https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/config/createConfig.js
config.module.rules.unshift(ieRule);
return config;
},
};
{
"presets": [
[
"razzle/babel",
{
"targets": {
"browsers": [
"ie 11",
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions"
]
}
}
]
]
}Also there were some additional errors in IE 11 such as:
These were solved by editing the Windows registry as it's said here Namely I created to increase the allowed amount of websockets per a page. After that the issue appeared less often (rarely enough to debug without much inconvenience, but when it appears again you need to open another tab and close the current). |
|
I finally have a workaround after looking at this for a couple of days I had to change the client for WebpackDevServer from react-dev-utils/webpackHotDevClient to the alternative of webpack/hot/dev-server You have to go to your webpack.config.js file and swap out this line:
with this one:
|
|
@a1g0rithm this is work for me. |
|
@a1g0rithm where did you find webpack.config.js? |
|
The solution provided by @a1g0rithm is the only one that worked for me after upgrading an older, ejected CRA app from webpack v2 to v4. The webpack.dev.config file contains this message: entry: [
// ...
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
require.resolve('react-dev-utils/webpackHotDevClient'),Simply uncomment the first two require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
// require.resolve('react-dev-utils/webpackHotDevClient'), |
|
I think this was a bad import that imported webpack the client in development. Fixed in v4 |
There seems to be an issue with Internet Explorer 11, where it breaks on an arrow function in
ansi-styles. I think the requirement chain is like this:ansi-styleschalkreact-dev-utilsrazzle-dev-utils.This is very similar to #522. It may have once been fixed by #547. There is something of a difference in that those had to do with
strip-ansi&ansi-regex… not the same package but AFAIK they're interrelated withchalk, coloring output from the hot reloading middleware.No particular steps to reproduce this, just make a new Razzle app and try running it in IE 11.
The text was updated successfully, but these errors were encountered: