React App 无法在 Microsoft Edge 浏览器上运行，但在 Chrome 和 Firefox 上运行良好答案

【问题标题】：React App not working on Microsoft Edge browser, but working fine on Chrome and FirefoxReact App 无法在 Microsoft Edge 浏览器上运行，但在 Chrome 和 Firefox 上运行良好
【发布时间】：2020-09-17 23:24:12
【问题描述】：

该应用在 chrome 和 firefox 上运行良好，但在 Edge 上无法运行。这是我的 package.json。我正在使用 create-react-app。

{
"version": "0.1.0",
"private": true,
"dependencies": {
    "@hookform/resolvers": "^0.1.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "joi": "^17.2.1",
    "jquery": "^3.5.1",
    "little-state-machine": "^3.0.3",
    "little-state-machine-devtools": "^1.0.0",
    "moment": "^2.27.0",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-dom": "^16.13.1",
    "react-google-autocomplete": "^1.2.6",
    "react-google-maps": "^9.4.5",
    "react-hook-form": "^6.0.8",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-spring": "^8.0.27",
    "react-stepzilla": "^6.0.2",
    "react-table": "^7.5.0",
    "react-to-print": "^2.9.0",
    "react-toastify": "^6.0.8",
    "recoil": "0.0.10",
    "underscore": "^1.10.2",
    "yup": "^0.29.2"
},
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},
"eslintConfig": {
    "extends": "react-app"
},
"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ]
}

}

我在 Edge 中收到此错误

SCRIPT1028：SCRIPT1028：预期的标识符、字符串或数字。在 1.chunk.js

它指向下面代码的第二行。带有扩展运算符的那个。

function setUnvalidatedAtomValue(state, key, newValue) {
  return { ...state,
  atomValues: mapByDeletingFromMap$1(state.atomValues, key),
  nonvalidatedAtoms: mapBySettingInMap$1(state.nonvalidatedAtoms, key, newValue),
  dirtyAtoms: setByAddingToSet$1(state.dirtyAtoms, key)
 };
} // Set a node value and return the set of nodes that were actually written.
// That does not include any downstream nodes which are dependent on them.

现在我认为这可能是由于 Edge 不支持扩展运算符。我认为也许使用 recoiljs 进行全局状态管理可能会导致问题，但我不太确定。任何解决此问题的方法。

【问题讨论】：

标签： reactjs

【解决方案1】：

我假设这是开发过程中的问题，而不是生产过程中的问题（如果我错了，请纠正我）。根据 create-react-app 网站here，开发环境针对现代浏览器，因此支持现代 js 功能，如 async/await、import 语句和解构。根据该链接，似乎将 Edge 添加到 browserlist.development 应确保在开发过程中支持它。请注意，在生产中 create-react-app 将 react 代码转换为 es5，这不应该有支持问题，但是，请参阅上面 create-react-app 链接上有关 polyfill 和运行时支持的说明，因为这些需要额外考虑。

【讨论】：