App not running on IE11, polyfills not working

Is this a bug report?

Yes.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

I read the section from browser support and went through some of the issues regarding the addition to browserslist in package.json

Environment

This problem is specific for IE11 (v11.112.17134.0) running on Windows 10

Steps to Reproduce

(Write your steps here:)

1. run npm install
2. run npm start
3. open in browser

Expected Behavior

I expected my app to load, like it does in Chrome, Firefox and Safari.

Actual Behavior

I’m getting a “TypeError: Object doesn’t support property or method ‘values’”

I’ve used the Object.values() method in several places around the app, which is not supported on IE, but i was under the impression the build process should replace it with a polyfill

Reproducible Demo

The production version of the app also crashes, but it gives `‘startsWith’ method as the reason for the crash. You can view the app here. Unfortunately, i’m unable to share the actual code.

Here is the package.json

{
	"name": "asd",
	"version": "0.1.0",
	"private": true,
	"proxy": "http://localhost:3001/",
	"dependencies": {
		"axios": "^0.17.1",
		"bootstrap": "^4.0.0",
		"classnames": "^2.2.5",
		"currency-formatter": "^1.3.1",
		"firebase": "^5.0.4",
		"moment": "^2.20.1",
		"money": "^0.2.0",
		"node-sass-chokidar": "0.0.3",
		"npm-run-all": "^4.1.2",
		"rand-token": "^0.4.0",
		"rc-time-picker": "^3.2.1",
		"react": "^16.1.1",
		"react-cookie-banner": "^3.0.0",
		"react-csv": "^1.0.8",
		"react-datepicker": "^1.1.0",
		"react-document-meta": "^3.0.0-beta.2",
		"react-dom": "^16.1.1",
		"react-dropzone": "^4.2.3",
		"react-ga": "^2.4.1",
		"react-google-maps": "^9.4.5",
		"react-html-email": "^3.0.0",
		"react-image-gallery": "^0.8.6",
		"react-lazyload": "^2.3.0",
		"react-redux": "^5.0.6",
		"react-router-dom": "^4.2.2",
		"react-router-redux": "^4.0.8",
		"react-script-loader": "0.0.1",
		"react-scripts": "1.0.17",
		"react-star-ratings": "^2.2.0",
		"react-stripe-elements": "^1.2.1",
		"reactstrap": "^5.0.0-beta",
		"redux": "^3.7.2",
		"redux-form": "^7.1.2",
		"redux-i18n": "^1.5.10",
		"redux-persist": "^5.9.1",
		"redux-thunk": "^2.2.0"
	},
	"scripts": {
		"build-css": "node-sass-chokidar src/ -o src/",
		"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
		"start-js": "react-scripts start",
		"start": "npm-run-all -p watch-css start-js",
		"build-js": "react-scripts build",
		"build": "npm-run-all build-css build-js",
		"test": "react-scripts test --env=jsdom",
		"eject": "react-scripts eject"
	},
	"browserslist": [
		"> 1%",
		"IE 10"
	],
	"devDependencies": {
		"redux-devtools-extension": "^2.13.2"
	}
}

[borisyordanov]

@jsrhome I’m not sure why i made the decision when i did, but i actually installed https://www.npmjs.com/package/babel-polyfill and imported it (import 'babel-polyfill';) at the top of my index.js. It works in dev and build.

Maybe a third party library that you’re loading in your index.html uses String.endsWith and babel can’t override it?

[evercool]

In my case I had to import this

import 'babel-polyfill'; 
import 'react-app-polyfill/ie11';

and remove all kinds of other polyfills like https://cdn.polyfill.io/v2/polyfill.min.js from index.html because they dont work together.