Webpack Hot Dev Client Breaks on older browsers
Created by: cliedeman
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.