React应用无法在IE11中运行已经尝试过polyfills

问题描述

我们的使用create react app构建的react app在IE11（开发和生产）中不起作用。到目前为止，我们已经使用core.js来填充代码，但是IE11突然停止了工作。最初，我们会遇到以下两个错误之一：

SCRIPT438：对象不支持属性或方法“条目”
SCRIPT5009：“代理”未定义

看来，App组件根本没有在IE11中加载。

我们尝试了以下运气：

Object.entries polyfill（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries）
react-app-polyfill（https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md）
完全去除react-pose
在节点版本之间切换
我们还尝试了升级所有软件包

我们的index.js文件位于顶部：

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'proxy-polyfill';

在实现上述解决方案之后，我们将遇到样式化组件错误： SCRIPT5022 ：：无法为未定义的组件创建样式组件。

我们的packages.json包含以下内容：

      "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"
    ]
  }
}

解决方法

我最近遇到了您的一个问题的解决方案。事实证明，framer-motion 库与 IE 不兼容，因为自 v2 以来，该库使用“代理”，这与 react 应用程序用于 IE 的 polyfill 不兼容。你可以看到这个here。

这解决了您的“代理”未定义问题

internet-explorer-11 polyfills reactjs reactjs