React 应用程序无法在 IE11 中运行（已尝试使用 polyfills）

Question

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

SCRIPT438：对象不支持属性或方法 'entries'
SCRIPT5009: 'Proxy' 未定义

似乎在 IE11 中根本没有加载 App 组件。

我们已经尝试了以下但没有成功：

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

Answer 1

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

这解决了您的问题，因为 'Proxy' 未定义

React 应用程序无法在 IE11 中运行（已尝试使用 polyfills）

React app not working in IE11 (have tried polyfills)

reactjs

internet-explorer-11

polyfills