web-dev-qa-db-ja.com

ReactJS-SCRIPT1010：予期される識別子-本番ビルドはIE11で実行されていません

今日、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でも同様に機能します。ポリフィルが必要ですか？

reactjsinternet-explorer-11babeljscreate-react-apppolyfills
8
Vishal Gulati

修正方法は次のとおりです。 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

Danとgitで話し合った問題は次のとおりです。 https://github.com/facebook/create-react-app/issues/4255

6
Vishal Gulati

ポリフィルの順序も要因のようです。この問題には、これを解決するのに役立つ解決策がいくつかあります。 https://github.com/facebook/react/issues/8379

1
Vidro3

IE11を機能させるには、バベルポリフィルを含め、ES5にトランスパイルする必要があります。

React 16は、コレクションタイプMapおよびSetに依存します。これらをネイティブでまだ提供していない可能性がある古いブラウザーやデバイスをサポートしている場合（例IE <11）または非準拠の実装を持っている場合（例IE 11） 、core-jsやbabel-polyfillなどのバンドルアプリケーションにグローバルポリフィルを含めることを検討してください。

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

あなたはそのようにウェブパックを介してポリフィルを含めることができます

entry: {
      app: [
        'babel-polyfill',
        'react-hot-loader/patch',
        'react',
        'react-dom',
        './src/index.web.tsx',
      ]
},
0
Paul McLoughlin

これはIE問題であり、フレームワークに反応しません。

「デフォルト」がIEの予約語であることの問題

「デフォルト」関数の名前を新しい名前に変更するか、JavaScript関数を次のように使用できます。

return e["default"]
0
mzoabi