Our react app, built with create react app, isn't working in IE11 (development and production). Up till now we have used core.js to polyfill our code, but suddenly IE11 has stopped working. Initially we are met with one of the two following errors:
It appears that the App component isn't loading at all in IE11.
We have tried the following without luck:
Our index.js file has this at the top:
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'proxy-polyfill';
After we have implemented the above solutions we are left with a styled-components error: SCRIPT5022: : Cannot create styled-component for component: undefined.
Our packages.json contains the following:
"dependencies": {
"@material-ui/core": "^4.2.0",
"@material-ui/icons": "^4.2.1",
"axios": "^0.18.0",
"axios-token-interceptor": "^0.1.0",
"babel-eslint": "^10.0.1",
"core-js": "^3.2.0",
"eslint-config-react-app": "^4.0.1",
"formik": "^1.5.1",
"framer-motion": "^2.6.0",
"immutability-helper": "^3.0.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"polished": "^3.3.0",
"prop-types": "^15.7.2",
"qs": "^6.7.0",
"react": "^16.8.6",
"react-countup": "^4.1.3",
"react-device-detect": "^1.6.2",
"react-div-100vh": "^0.3.4",
"react-dom": "^16.8.6",
"react-ga": "^2.5.7",
"react-html-parser": "^2.0.2",
"react-player": "^1.11.0",
"react-pose": "^4.0.8",
"react-redux": "^7.0.3",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "^3.0.1",
"react-scroll": "^1.7.10",
"react-spinners": "^0.5.4",
"redux": "^4.0.1",
"redux-saga": "^1.0.2",
"reselect": "^4.0.0",
"styled-components": "^5.0.0",
"styled-icons": "^9.3.0",
"styled-normalize": "^8.0.6",
"yup": "^0.27.0"
},
"devDependencies": {
"@storybook/react": "^5.0.11",
"babel-plugin-react-remove-properties": "^0.3.0",
"cypress-testing-library": "^3.0.1",
"env-cmd": "^8.0.2",
"enzyme": "^3.9.0",
"eslint": "5.16.0",
"eslint-plugin-flowtype": "^3.8.2",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",
"jest": "^24.8.0",
"jest-enzyme": "^7.0.2",
"jest-styled-components": "^6.3.1",
"react-test-renderer": "^16.8.6",
"react-testing-library": "^7.0.0",
"redux-devtools": "^3.5.0"
},
"browserslist": {
"development": [
"last 2 chrome versions",
"last 2 firefox versions",
"last 2 edge versions",
"ie 11"
],
"production": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 11"
]
}
}
I recently came across the solution to one of your problem. It turns out that the framer-motion library is not compatible with IE, because since v2 the library uses "proxy", which is not compatible with polyfills that react app uses for IE. You can see this here.
This solves your problem for 'Proxy' is undefined