App not running on IE11, polyfills not working
See original GitHub issueIs 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:)
- run
npm install
- run
npm start
- 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"
}
}
Issue Analytics
- State:
- Created 5 years ago
- Comments:11 (2 by maintainers)
@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?In my case I had to import this
and remove all kinds of other polyfills like
https://cdn.polyfill.io/v2/polyfill.min.js
from index.html because they dont work together.