IE11 syntax error with v3.3.1

[afrankel-sfdo]

Describe the bug

• Development mode throws a syntax error in IE11 on v3.3.1
• SCRIPT438: Object doesn't support property or method 'entries'

Did you try recovering your dependencies?

Yes.

›» yarn --version
1.21.1

Environment

›» npx create-react-app --info

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.21.1 - ~/Code/makana-platform/nani/node_modules/.bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: Not Found
    Safari: 13.0.5
  npmPackages:
    react: ^16.12.0 => 16.12.0 (16.8.6, 0.14.9)
    react-dom: ^16.9 => 16.12.0 (16.8.6)
    react-scripts: 3.3.1 => 3.3.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Upgraded to CRA v3.3.1
2. Startup app in dev mode (yarn start)
3. Open site in IE11

Expected behavior

• IE11 should work

Chrome - WORKS

Actual behavior

• IE11 throws SCRIPT438: Object doesn't support property or method 'entries' in ansi-styles
• Posted an issue to that repo, was denied: IE11 syntax error chalk/ansi-styles#57

IE11 - BROKEN

Reproducible demo

• https://github.com/afrankel-sfdo/cra-3.3.1
• clone
• yarn && yarn start
• View site in IE11

›» yarn browserslist --env="development"
chrome 79
firefox 72
ie 11
safari 13

[ianschmitz]

Ah yes it looks like this is a change from 6.0.4 => 6.0.5 of react-error-overlay.

https://unpkg.com/[email protected]/lib/index.js
https://unpkg.com/[email protected]/lib/index.js

I think what's happening is there isn't an appropriate browserslist in the react-error-overlay project. The overlay is built before we publish to npm. I would have thought that our babel config that runs over node_modules dependencies in the consuming application would have fixed that up?

create-react-app/packages/react-scripts/config/webpack.config.js

Lines 457 to 493 in 3190e4f

	{
	test: /\.(js|mjs)$/,
	exclude: /@babel(?:\/|\\{1,2})runtime/,
	loader: require.resolve('babel-loader'),
	options: {
	babelrc: false,
	configFile: false,
	compact: false,
	presets: [
	[
	require.resolve('babel-preset-react-app/dependencies'),
	{ helpers: true },
	],
	],
	cacheDirectory: true,
	// See #6846 for context on why cacheCompression is disabled
	cacheCompression: false,
	// @remove-on-eject-begin
	cacheIdentifier: getCacheIdentifier(
	isEnvProduction
	? 'production'
	: isEnvDevelopment && 'development',
	[
	'babel-plugin-named-asset-import',
	'babel-preset-react-app',
	'react-dev-utils',
	'react-scripts',
	]
	),
	// @remove-on-eject-end
	// Babel sourcemaps are needed for debugging into node_modules
	// code. Without the options below, debuggers like VSCode
	// show incorrect code and set breakpoints on the wrong lines.
	sourceMaps: shouldUseSourceMap,
	inputSourceMap: shouldUseSourceMap,
	},
	},

Did you want to try putting in a PR that adds browserslist to packages/react-error-overlay and set it to "ie 11" and see if that fixes it for you?

[ianschmitz]

#8164 could also be related?

[petetnt]

I struggled with this today too: ended up in downgrading to 3.2.0. which worked. Changing browserslist did nothing.

There’s a recent issue at babel where polyfills are not applied in dev which is could be the root cause?

[schm-dt]

+1, also experiencing this.

[ambroselittle]

I really don't mean this sarcastically. Could y'all add "Open in IE 11" to your test plans for CRA? This plus this, both very recently, where it breaks immediately in IE. Both head scratchers until we figure it out/Google and find the issue(s) here.

[arolonger]

the same issue on my side with the same CRA version - v3.3.1

[demns]

as a quick fix -- overriding config to
entry: ['./node_modules/core-js/es/object/entries.js', ...config.entry],
works

so if you use https://github.com/timarney/react-app-rewired
the config may look like the following

const path = require('path');

module.exports = {
    webpack(config = {}) {
        return {
            ...config,
            entry: [path.resolve(__dirname, './node_modules/core-js/es/object/entries.js'), ...config.entry],
        };
    }
};

[ianschmitz]

I suspect reverting #8164 will fix it for folks - at least in react-error-overlay.

[staszekj]

As I mentioned in #8438. The temporary solution could be:

Download: core-js-bundle.js from https://unpkg.com/[email protected]/index.js

In ./public/index.html

<% if (process.env.NODE_ENV === 'development') { %>
  <script src="./core-js-bundle.js"></script>
<% } %>

Ugly hack but working so far I've checked

[silverwind]

This issue makes one wonder why a module dedicated to terminal colors is sent to browsers in the first place. To my knowledge, chalk does not support the browser console in any way.

[codercodingthecode]

add this to your package.json,
should fix chalk dev reload issue which is caused on ansi-styles with that 438 error

 "resolutions": {
    "react-dev-utils/chalk/ansi-styles": "https://github.com/codercodingthecode/ansi-styles"
}