ReactJS - SCRIPT1010：预期标识符 - 生产版本未在 IE11 上运行

IT技术 reactjs internet-explorer-11 babeljs create-react-app polyfills
2021-04-06 20:38:58

我今天用 create-react-app 创建了一个新项目。生产版本在 IE11 上运行不正常，控制台显示以下错误：

SCRIPT1010: Expected identifier

它指向我的 main.js 中的那一行：

{var n=e&&e.__esModule?function(){return e.default}:function(){return e};

错误在上面的 e.(default) 之后。我的包 json 很简单：

{
  "name": "sample-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

奇怪的是，我的开发服务器在 IE11 上运行良好，所以问题仅在于生产版本。它也适用于 Chrome。那我需要有 polyfills 吗？

4个回答

这是我修复它的方法。不要忘记 React “Dan Abramov” 先生在这方面帮助了我。

所以问题是默认情况下，应用程序是在 IE7 上呈现的，而不仅仅是在支持转译构建的 IE IE11/EDGE 上。所以我不得不提到元信息让浏览器知道预期的浏览器是 IE11/edge。在head你的 index.html 部分添加这个：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

现在，您可能还会在控制台中看到一些错误，内容如下： 

SCRIPT5009: 'Set' is undefined

不用担心，还有一种方法可以解决这个问题：https : //reactjs.org/docs/javascript-environment-requirements.html

这是我在 git 上与 Dan 讨论的问题：https : //github.com/facebook/create-react-app/issues/4255

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 为我工作
2021-06-06 20:38:58

似乎 polyfill 的顺序也是一个因素。此问题中有多种解决方案可以帮助解决此问题。 https://github.com/facebook/react/issues/8379

您需要包含 babel-polyfills 并转换为 ES5，以便 IE11 工作。

React 16 依赖于集合类型 Map 和 Set。如果您支持旧版浏览器和设备，这些浏览器和设备可能尚未原生提供这些功能（例如 IE < 11）或具有不合规的实现（例如 IE 11），请考虑在您的捆绑应用程序中包含全局 polyfill，例如 core-js 或 babel -polyfill。

https://reactjs.org/docs/javascript-environment-requirements.html

你可以像这样通过 webpack 包含一个 polyfill

entry: {
      app: [
        'babel-polyfill',
        'react-hot-loader/patch',
        'react',
        'react-dom',
        './src/index.web.tsx',
      ]
},
我正在使用 create-react-app。我应该弹出 webpack 吗？
2021-06-05 20:38:58
你可以将上面的 polyfill 添加到 webpack
2021-06-20 20:38:58

这是 IE 问题，而不是 React 框架。

“默认”是 IE 上的保留字的问题

您可以将“默认”函数重命名为新名称或将 javascript 函数用作：

return e["default"]
其它你可能感兴趣的问题
上一篇无法反向运行 adb (React-Native) 下一篇如何在react中显示 base64 图像？