Webpack Hot Dev Client Breaks on older browsers #5336

cliedeman · 2018-10-07T00:05:17Z

Is this a bug report?

yes

Did you try recovering your dependencies?

no

Which terms did you search for in User Guide?

hot dev

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Binaries:
Node: 8.12.0 - /usr/local/opt/node@8/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/opt/node@8/bin/npm
Browsers:
Chrome: 69.0.3497.100
Safari: 12.0
npmPackages:
react: ^16.5.2 => 16.5.2
react-dom: ^16.5.2 => 16.5.2
react-scripts: 2.0.4 => 2.0.4
npmGlobalPackages:
create-react-app: 2.0.0-next.2150693d

Steps to Reproduce

(Write your steps here:)

npx create-react-app my-app
cd my-app
yarn start
Navigate to app url in old browser that does not have map. E.g. Android 4.4 default browser or ie9 (I used Android 4.4)

Expected Behavior

Default Screen Loads

Actual Behavior

Blank Screen, connecting the debugger reveals the console error Map is not defined

This is caused by a Map call from ansi-styles which is required by chalk.

To get past this I added require('react-app-polyfill/ie9'); to the top of webpackHotDevClient (Delete the babel loader cache if you do this). This gets further but then failes on setPrototypeOf. Using the catch all require('core-js'); allows the app to work as expected.

Note: the yarn build version always works because the hot dev client is not present

I am not sure if this is something CRA actually wants to support, I think some documentation that the dev mode yarn start may not work with older browsers will be enough.

The text was updated successfully, but these errors were encountered:

ematipico · 2018-10-11T05:43:15Z

CRA doesn't support old browsers anymore by default. https://reactjs.org/blog/2018/10/01/create-react-app-v2.html#breaking-changes

cliedeman · 2018-10-11T05:46:50Z

But I still expected it to work after adding the opt in polyfills

ematipico · 2018-10-11T05:50:36Z

Try to use the latest of CRA. I see that you using a next branch, not sure if it's up to date or not...

miraage · 2018-10-29T13:32:50Z

@cliedeman do you have import 'react-app-polyfill/ie9'; as the very first line of src/index.js?

lomocc · 2018-11-29T07:11:08Z

I found the dependencies cause the bug

create-react-app -> react-scripts/config/webpack.config.js -> react-dev-utils/webpackHotDevClient.js -> react-dev-utils/formatWebpackMessages.js -> chalk -> ansi-styles -> Map

and I think we need setupPolyfill ( just like setupProxy)，it should be insert before webpackHotDevClient:

entry: [
  paths.setupPolyfill,
  isEnvDevelopment &&
  require.resolve('react-dev-utils/webpackHotDevClient'),
  // Finally, this is your app's code:
  paths.appIndexJs,
]

weiq · 2019-01-25T15:52:14Z

-- [email protected]
    -- [email protected]
         -- [email protected]

Nickman87 · 2019-03-14T13:54:12Z

Having the same issue trying to debug my app on IOS 7 safari.
Is there a workaround for this?

lomocc · 2019-03-15T01:31:31Z

@Nickman87

My temp solution, put this in public/index.html

<% if (process.env.NODE_ENV === 'development') { %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.5/es6-sham.min.js"></script>
<% } %>

https://gist.github.com/lomocc/a73ec03d7d01a319098ee90165f74c24

arnaudambro · 2019-06-04T11:49:54Z

Thanks to @lomocc comment, I sorted it out that way: I added a paths.setupPolyfill in ./config/webpack.config.js like he said:

entry: [
  paths.setupPolyfill,
  isEnvDevelopment &&
  require.resolve('react-dev-utils/webpackHotDevClient'),
  // Finally, this is your app's code:
  paths.appIndexJs,
]

and then in the ./config/paths.js I added and export:

module.exports = {
  //  ... all the exports
  appNodeModules: resolveApp('node_modules'),
  setupPolyfill: resolveApp('node_modules/react-app-polyfill/ie9'), // added
};

I also needed the es6-sham.min.js script to make it work, so in my index.html I added these lines:

<% if (process.env.NODE_ENV === 'development') { %>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.5/es6-sham.min.js"></script>
<% } %>

shirakaba · 2019-07-03T09:57:52Z

Solution in my case

Thanks to @lomocc and @arnaudambro for their work on this.

If you want to get the dev build working without altering react-scripts/config.webpack.js and react-scripts/config/paths.js, adding this before my closing </body> tag in index.html worked for me (when trying to support Opera 12.16):

<% if (process.env.NODE_ENV === 'development') { %>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=Map%2CSet%2CObject.setPrototypeOf"></script>
<% } %>

Note that I'm not using es6-sham here. I'm (potentially redundantly) providing polyfills.

Details

How I determined which features were missing

I was specifically trying to enable an app to run in Opera 12.16, which I initially found lacked Map support. So I started by providing a polyfill for that using polyfill.io's URL builder. But then I found it still lacked Set. So one-by-one, I polyfilled each lacking feature that the browser was failing on, and concluded that for Opera 12.16, I needed to polyfill Map, Set, and Object.setPrototypeOf to support the DevTools.

Polyfill redundancy in dev mode

If you're polyfilling anything from react-app-polyfill in index.js, you may now be polyfilling some of the same features again redundantly (purely to provide them in time for the DevTools to use them). In the production build though, neither DevTools nor my above polyfill will be included, so it's a moot point.

seanbecker15 · 2019-07-12T17:46:24Z

IE 10 Compatibility

.NET Core / React / Redux

I just spent a few hours making my .NET Core / React app compatible with IE 10. Here is my solution until this is fixed in create-react-app. The above comments did not discuss MutationObserver, which is what caused me issues after ejecting and changing the order of dependencies.

Eject create-react-app: npm run eject
- Before doing this you should read about ejecting, you can't turn back once you do.
Change order of appIndexJs and webpackHotDevClient in config/webpack.config.js
- Reason: see here
Add core-js & mutation-observer: npm install core-js mutation-observer
- Another thing that ie 9/10 does not handle
Modify package.json with browserslist (ie > 9 is what is important here)

"browserslist": [
    "ie > 9",
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ],

Modify index.js
- important: make sure that these go at the very top of index.js
- Add polyfills, core-js, and mutation-observer

import 'core-js/es';
import 'react-app-polyfill/ie9';
import 'mutation-observer';

shirakaba · 2019-07-12T18:17:15Z

Eject create-react-app

@seanbecker15 Just to mention that you can avoid ejecting by using customize-cra or rescripts (they're both about equally as good) and re-ordering the webpack config as you require.

NixBiks · 2019-09-30T10:47:08Z

Eject create-react-app

@seanbecker15 Just to mention that you can avoid ejecting by using customize-cra or rescripts (they're both about equally as good) and re-ordering the webpack config as you require.

Do you mind adding how?

ThekhoN · 2019-10-08T12:41:40Z

You do NOT have to eject from CRA.

Example: https://github.com/ThekhoN/create-react-app-ie11

Steps:

Install react-app-polyfill

npm i react-app-polyfill
Import react-app-polyfill/ie11 at the TOP of index.js

import 'react-app-polyfill/ie11'

~~3. Delete .cache in /node_modules~~

~~4. Add ie11 meta tag in index.html (in public folder)~~

~~<meta http-equiv="X-UA-Compatible" content="IE=11">~~

activebiz · 2019-10-09T09:49:39Z

@ThekhoN Your solution doesnt work for me. Clone your repo. it gives me following error with blank page on IE11.

SCRIPT1002: Syntax error
0.chunk.js (15,34)
SCRIPT1002: Syntax error
main.chunk.js (280,62)

ThekhoN · 2019-10-09T20:42:30Z

@activebiz can u try again.
I updated the repo by adding "IE 11" in the browserslist.

There seems to be some caching issue happening at IE11's end.
Try clearing the IE11 browser cache.
Running npm cache clean --force also seems to resolve the issue.

nicoladl · 2019-11-08T14:55:44Z

@ThekhoN
you should also include import 'react-app-polyfill/stable' in according with the doc:
https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md

jozsi · 2019-12-26T16:37:25Z

@kareemali-afs, a couple of observations:

you don't need to install chalk react-dev-utils strip-ansi ansi-styles explicitly (I don't think you should even delete node_modules before)
make sure to update your package.json like this (otherwise the override won't have any effect, cause it will call the unmodified react-scripts):

  "scripts": {
    "start": "react-app-rewired start",

kareemali-afs · 2019-12-26T16:54:09Z

@jozsi

True, I just do it to make sure it's clean from any changes I may have done while testing other solutions
I did add that but forgot to mention it my previous comment

You're probably right that it's because webpackHotDevClient loads first since the console error refers to this file but I am not sure why your solution is not working.

jozsi · 2019-12-26T21:09:06Z

@kareemali-afs - I published the repo with the craco config I made for @rjcnd105, take a look at the changes I've made. It works for the very old, embedded browser I use (same WebKit engine as PhantomJS 2.1 uses, with capabilities similar to Safari 6). I attempted to add IE 11 support, however, I did not test it (don't have an environment for it). Give it a try :)

suminas85 · 2019-12-27T11:54:21Z

@kareemali-afs
As a temporary solution to debug in IE you can disable webpackHotDevClient

Add debug mode to scripts

  "scripts": {
    "start": "react-app-rewired start",
    "start:debug": "DEBUG_MODE=true react-app-rewired start",

update config-overrides.js :

const {
  override,
  babelInclude,
} = require('customize-cra');
const path = require('path');

module.exports = override(
  (config) => {
    if (process.env.DEBUG_MODE) {
      config.entry.shift(); // remove webpackHotDevClient (first as default)
      config.entry.unshift(require.resolve('react-app-polyfill/stable'));
    }

    return config;
  },
  babelInclude([path.resolve('src')])
);

RickeyWard · 2020-01-03T01:50:20Z

Create a new create-react-app, add react-app-polyfill, update index.js to include the pollyfills, update browserlist to have ie 11 in both prod and dev, and it works in build, but fails in dev, because of the websocket. Workarounds presented here haven't worked for me. I've been having to test changes by doing builds and static serving.

PrajwalVBharadwaj · 2020-01-20T03:58:25Z

None of the workarounds mentioned worked for me in development mode. Any updates about it?

ivanmccarthy · 2020-01-20T19:41:47Z

Create a new create-react-app, add react-app-polyfill, update index.js to include the pollyfills, update browserlist to have ie 11 in both prod and dev, and it works in build, but fails in dev, because of the websocket. Workarounds presented here haven't worked for me. I've been having to test changes by doing builds and static serving.

@RickeyWard Have you resolved this issue yet? I'm having the same problem.

a1g0rithm · 2020-01-21T19:36:38Z

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

ivanmccarthy · 2020-01-22T17:02:14Z

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 worked for me, thank you very much.

Felix-Indoing · 2020-01-27T17:26:37Z

I downgrade CRA to 3.2.0 to make it work.

strongui · 2020-01-27T20:56:48Z

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

Did you have to do anything else? Because while this works to load up the page in IE, hot reload no longer works. You have to refresh the page manually to see the changes.

a1g0rithm · 2020-01-27T21:10:27Z

Did you have to do anything else? Because while this works to load up the page in IE, hot reload no longer works. You have to refresh the page manually to see the changes.

Unfortunately, hot reloading won't work. Not sure if downgrading like @Felix-Indoing suggests keeps it from breaking.

daruj · 2020-08-04T19:55:09Z

Hey, I'm having the same issue with IE9.. anyone here found a solution that does NOT involve ejecting? .. using the polifills does not seems to do any magic.

seanbecker15 · 2020-08-05T02:10:20Z

Hey, I'm having the same issue with IE9.. anyone here found a solution that does NOT involve ejecting? .. using the polifills does not seems to do any magic.

I have a fully functional application that runs in IE9. There were several fixes I had to make that are not mentioned in this thread. I ejected but if you provide your error I may be able to point you in the right direction.

InSuperposition · 2020-10-18T05:09:35Z

After reading this comment, I found the following solution works with hot reload. I'm on v3.4.1 of react-scripts

In my local node_modules folder, I modified one file in react-dev-utils (a create-react-app dependency) by removing the offending function call and the chalk import statement
Then I used patch-package to patch my project's react-dev-utils
added the package for CRA's polyfills

import "react-app-polyfill/ie9"
import "react-app-polyfill/stable"

I added a meta tag to <head /> element to public/index.html.
(optional) It prevents IE users from enabling its "compatibility" mode

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Its also possible browserlist's development environment may need additional configuration.

Se usa el soporte de create-react-app: https://create-react-app.dev/docs/supported-browsers-features/ y https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md#polyfilling-other-language-features. IE 11 está soportado en producción pero no en desarrollo (facebook/create-react-app#7316 y facebook/create-react-app#5336).

yjwSurCode · 2021-01-29T03:39:29Z

@vincent Uncaught SyntaxError: Use of const in strict mode /sattic/js/main.chunk.js 199:1 SyntaxError :Use of const in strict mode

yjwSurCode · 2021-02-02T09:30:55Z

I found the dependencies cause the bug

create-react-app -> react-scripts/config/webpack.config.js -> react-dev-utils/webpackHotDevClient.js -> react-dev-utils/formatWebpackMessages.js -> chalk -> ansi-styles -> Map

and I think we need setupPolyfill ( just like setupProxy)，it should be insert before webpackHotDevClient:
entry: [
  paths.setupPolyfill,
  isEnvDevelopment &&
  require.resolve('react-dev-utils/webpackHotDevClient'),
  // Finally, this is your app's code:
  paths.appIndexJs,
]

I created a create react app to run on Android 5.0. This problem does not appear in the higher version of Android. Some people say it is node_ modules/webpack-dev-server/client/ index.js There is no compilation here. I need to compile manually. I don't know how to configure it

yjwSurCode · 2021-02-02T09:46:27Z

isEnvDevelopment

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

I created a create react app to run on Android 5.0. This problem does not appear in the higher version of Android. Some people say it is node_ modules/webpack-dev-server/client/ index.js There is no compilation here. I need to compile manually. I don't know how to configure it

but!!! i use your method It didn't work

MiroslavJag · 2021-03-10T09:56:33Z

After reading all the comments this what works for my app:

Install react-app-polyfil
npm i react-app-polyfil
Import react-app-polyfill in index file
import "react-app-polyfill/ie11"
import "react-app-polyfill/stable"
Add ie11 to browserslist in package.json
"development": [ "ie 11", ]
Delete node modules
rm -rf node_modules
Clean the npm cache
npm cache clean --force
Install node modules
npm install
Start the project

raix · 2021-12-17T08:55:01Z

Can this issue be closed - it seems to be resolved?
(As for CRA v5 we depend on the Webpack 5 client)

cliedeman · 2021-12-17T09:19:58Z

@raix the core of the issue was never about webpack but imported deps that break when developing in older browsers. I no longer need this so I will close it. If someone else reports an error they can open a new issue

Timer added this to the 2.0.x milestone Oct 14, 2018

Timer added the issue: bug label Oct 14, 2018

iansu modified the milestones: 2.1.x, 3.x Mar 10, 2019

zjr mentioned this issue Apr 22, 2019

IE 11: broken with webpackHotDevClient. jaredpalmer/razzle#998

Closed

shirakaba mentioned this issue Jul 3, 2019

Support developing in IE 9 #5674

Closed

bugzpodder mentioned this issue Jul 3, 2019

create-react-app not working with IE11 in development mode #7316

Closed

bugzpodder modified the milestones: 3.x, 3.1 Jul 3, 2019

yezihaohao mentioned this issue Jul 11, 2019

问题及解决方案汇总--FAQ yezihaohao/react-admin#12

Open

ianschmitz modified the milestones: 3.3, 3.4 Dec 5, 2019

iansu modified the milestones: 3.4, 3.5 Feb 14, 2020

mjmccull0 mentioned this issue Feb 25, 2020

Application Displays Blank Page on IE11 IBatsios/capstone#32

Closed

vgoma mentioned this issue Apr 4, 2020

Запуск Angular примера в IE 11 vgoma/crypto-pro#15

Closed

BenJeau mentioned this issue Sep 2, 2020

Internet Explorer is not working in latest dev - since Razzle.js CDH-Studio/I-Talent#811

Closed

raix modified the milestones: 5.1, 5.x Dec 17, 2021

cliedeman closed this as completed Dec 17, 2021

Webpack Hot Dev Client Breaks on older browsers #5336

Webpack Hot Dev Client Breaks on older browsers #5336

Comments

cliedeman commented Oct 7, 2018

Is this a bug report?

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

ematipico commented Oct 11, 2018

cliedeman commented Oct 11, 2018

ematipico commented Oct 11, 2018

miraage commented Oct 29, 2018

lomocc commented Nov 29, 2018

weiq commented Jan 25, 2019 • edited Loading

Nickman87 commented Mar 14, 2019

lomocc commented Mar 15, 2019

arnaudambro commented Jun 4, 2019

shirakaba commented Jul 3, 2019 • edited Loading

Solution in my case

Details

How I determined which features were missing

Polyfill redundancy in dev mode

seanbecker15 commented Jul 12, 2019 • edited Loading

IE 10 Compatibility

.NET Core / React / Redux

shirakaba commented Jul 12, 2019

NixBiks commented Sep 30, 2019

ThekhoN commented Oct 8, 2019 • edited Loading

Steps:

activebiz commented Oct 9, 2019

ThekhoN commented Oct 9, 2019 • edited Loading

nicoladl commented Nov 8, 2019

jozsi commented Dec 26, 2019

kareemali-afs commented Dec 26, 2019 • edited Loading

jozsi commented Dec 26, 2019

suminas85 commented Dec 27, 2019

RickeyWard commented Jan 3, 2020

PrajwalVBharadwaj commented Jan 20, 2020

ivanmccarthy commented Jan 20, 2020 • edited Loading

a1g0rithm commented Jan 21, 2020

ivanmccarthy commented Jan 22, 2020

Felix-Indoing commented Jan 27, 2020

strongui commented Jan 27, 2020

a1g0rithm commented Jan 27, 2020

daruj commented Aug 4, 2020

seanbecker15 commented Aug 5, 2020

InSuperposition commented Oct 18, 2020 • edited Loading

yjwSurCode commented Jan 29, 2021

yjwSurCode commented Feb 2, 2021

yjwSurCode commented Feb 2, 2021

MiroslavJag commented Mar 10, 2021 • edited Loading

raix commented Dec 17, 2021

cliedeman commented Dec 17, 2021

weiq commented Jan 25, 2019 •

edited

Loading

shirakaba commented Jul 3, 2019 •

edited

Loading

seanbecker15 commented Jul 12, 2019 •

edited

Loading

ThekhoN commented Oct 8, 2019 •

edited

Loading

ThekhoN commented Oct 9, 2019 •

edited

Loading

kareemali-afs commented Dec 26, 2019 •

edited

Loading

ivanmccarthy commented Jan 20, 2020 •

edited

Loading

InSuperposition commented Oct 18, 2020 •

edited

Loading

MiroslavJag commented Mar 10, 2021 •

edited

Loading