Razzle: IE 11: broken with webpackHotDevClient.

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: https://github.com/facebook/create-react-app/issues/5336. That one is related to Map being undefined, which, would make sense as something fixable w/ a polyfill.

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 ansi-regex, strip-ansi, some misc. files in react-dev-utils (including formatWebpackMessages.js), and misc chalk files as required by react-dev-utils. I'm not super familiar with react-dev-utils so I'm not sure if this is a bug with them or if this stuff just isn't supposed to be in the bundle or what.

There's two things you have to solve for here:

1. Polyfills are no longer in by default (same goes for CRA2). Polyfills will solve issues related to Promise/Map/Set/Symbol/Object.assign/Array.isArray/String.startsWith/etc. There's a dozen ways to handle this ranging from react-app-polyfill to requiring the specific core-js polyfills that your specific app needs; I think Babel itself can help figure out which core-js polyfills your code needs with the appropriate config (there might be a catch here? I'm unsure why CRA2 didn't go this route).

2. Some library authors no longer distribute es5 versions of their modules (ansi-regex, react-dev-utils, etc, etc). If you see IE11 choking on fat arrows, this is the issue you're facing. CRA2 solves this by transpiling node_modules (webpack conf in CRA2) while Razzle does not. With Razzle, you can either use older versions of those modules _or_ use Razzle's hooks to modify the webpack config to include the specific node_modules you want to compile.

I still don't get what's needed to change to make it work for IE 11. Even my whole production bundle now contains consts and arrow functions.
Do I need to find out which modules need transpiling by looking at the minified bundle? That'd suck, is there a more approachable way?

This got things working for me:

https://github.com/styleguidist/react-styleguidist/pull/1327#issuecomment-483928457

kinda annoying

You can follow below to resolve your issue:
https://create-react-app.dev/docs/supported-browsers-features/#supported-browsers

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 const & arrow function, but catch is after that I am stuck with webpackHotDevClient starts breaking & getting no clue in console too.

I have tried many solutions around this issue .
none of the provided solutions are working in development in IE11 or edge.
IE version: 11.864.17763.0

Below is my package json file.

{
"name": "typescript_tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^24.0.25",
"@types/node": "^12.12.24",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"react": "^16.12.0",
"react-app-polyfill": "^1.0.5",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"typescript": "^3.7.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
">0.2%",
"not dead",
"not op_mini all",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"last 2 ie version"
]
},
"devDependencies": {
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"node-sass": "^4.13.0",
"prettier": "^1.19.1"
}
}

My solution of this problem was the following (note that on Windows you need \ delimiters in paths, while on Linux / - it is taken into account in the regex):

razzle.config.js:

'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;
    },
};

.babelrc:

{
  "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:

SecurityError
The error you provided does not contain a stack trace.
Incompatible SockJS! Main site uses: "1.3.0", the iframe: "1.4.0".

These were solved by editing the Windows registry as it's said here
https://stackoverflow.com/questions/52549799/securityerror-on-ie11-when-initializing-websocket

Namely I created

HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
   SOFTWARE
      Microsoft
         Internet Explorer
            Main
               FeatureControl
                  FEATURE_WEBSOCKET_MAXCONNECTIONSPERSERVER
                     iexplore.exe = (DWORD) 0x0000014 (20)

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:

isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),

with this one:

isEnvDevelopment && require.resolve('webpack/hot/dev-server'),

@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.resolves and comment the last one:

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