Webpack Hot Dev Client Breaks on older browsers

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® Core™ 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:)

1. npx create-react-app my-app
2. cd my-app
3. yarn start
4. 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.

[lomocc]

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,
]

[miraage]

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