ReactJS-SCRIPT1010：預期標識符-生產版本未在IE11上運行

Question

我今天用create-react-app創建了一個新項目。 生產版本在IE11上運行不正常，控制台顯示以下錯誤：

SCRIPT1010: Expected identifier

它指向我的main.js內部的行：

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

錯誤在上面的e。（默認）之后。 我的包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上正常運行。 我需要保鮮紙嗎？

Answer 1

這是我固定的方法。 不要忘了React先生“ Dan Abramov”在這方面幫助了我。

因此，問題是默認情況下，應用程序是在IE7上呈現的，而不僅僅是在支持已編譯版本的IE IE11 / EDGE上呈現。 因此，我不得不提及元信息，以使瀏覽器知道預期的瀏覽器是IE11 / edge。 將其添加到index.html的head ：

<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

Answer 2

似乎polyfills的順序也是一個因素。 此問題中有幾種解決方案可以幫助解決此問題。 https://github.com/facebook/react/issues/8379

Answer 3

您需要包括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',
      ]
},

Answer 4

這是IE問題，不是反應框架。

IE中“默認”是保留字的問題

您可以將“默認”函數重命名為新名稱，或將javascript函數用作：

return e["default"]