React 應用程序在 IE11 中不起作用（嘗試過 polyfills）

Question

我們使用 create react app 構建的 react 應用程序無法在 IE11（開發和生產）中運行。 到目前為止，我們一直使用 core.js 來填充我們的代碼，但突然 IE11 停止工作。 最初，我們遇到了以下兩個錯誤之一：

1. SCRIPT438：對象不支持屬性或方法“條目”
2. SCRIPT5009：“代理”未定義

似乎在 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 )
• 完全去除反應姿勢
• 在節點版本之間切換
• 我們還嘗試升級所有軟件包

我們的 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 以來，該庫使用“代理”，這與 react 應用程序用於 IE 的 polyfill 不兼容。 你可以在這里看到這個。

這解決了“代理”未定義的問題