web-dev-qa-db-fra.com

ReactJS - SCRIPT1010: Identificateur attendu - La production n'est pas exécutée sur IE11

J'ai créé un nouveau projet avec create-react-app aujourd'hui. La génération de production ne fonctionne pas correctement sur IE11, la console affiche l'erreur suivante:

SCRIPT1010: Expected identifier

La ligne qui pointe vers mon main.js:

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

L'erreur est après l'e (valeur par défaut) ci-dessus. Mon paquet JSON est clair:

{
  "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"
  }
}

Aussi étrange que cela puisse paraître, mon serveur de développement fonctionne parfaitement sur IE11; Cela fonctionne également bien sur Chrome. Est-ce que j'ai besoin de polyfills?

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

Voici comment je l'ai corrigé. Sans oublier M. React "Dan Abramov" m'a aidé dans cette tâche.

Le problème est donc que, par défaut, l'application était rendue sur IE7 et non sur IE IE11/Edge qui prend en charge la version transpilée. J'ai donc dû mentionner les méta-informations pour informer le navigateur que le navigateur prévu est IE11/Edge. Ajoutez ceci dans la section head de votre index.html:

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

Maintenant, comme je l’ai compris, vous pouvez également voir une erreur dans la console qui se lit comme suit: 

SCRIPT5009: 'Set' is undefined

Ne vous inquiétez pas, il existe également un moyen de contourner ce problème: https://reactjs.org/docs/javascript-environment-requirements.html

Voici le problème que j'ai discuté avec Dan sur git: https://github.com/facebook/create-react-app/issues/4255

0
Vishal Gulati

Il semble que l'ordre des polyfills est également un facteur. Plusieurs solutions à ce problème pourraient vous aider à résoudre ce problème. https://github.com/facebook/react/issues/8379

1
Vidro3

Vous devez inclure babel-polyfills et transférer à ES5 pour que IE11 fonctionne.

React 16 dépend des types de collection Map et Set. Si vous soutenez navigateurs et appareils plus anciens qui ne les fournissent peut-être pas encore de manière native (par exemple, IE <11) ou ayant une implémentation non conforme (par exemple, IE 11), envisagez d'inclure un polyfill global dans votre application fournie, tels que core-js ou babel-polyfill.

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

Vous pouvez inclure un polyfill via webpack comme

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

Ceci est IE problème, pas réagir cadre.

le problème que "par défaut" est un mot réservé sur IE

vous pouvez renommer la fonction "par défaut" en un nouveau nom ou utiliser la fonction javascript comme suit:

return e["default"]
0
mzoabi