razzle: IE 11: broken with webpackHotDevClient.

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'),

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).

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 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?

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.

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'),

kinda annoying

This got things working for me:

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

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.