web-dev-qa-db-fra.com

SCRIPT1002: Erreur de syntaxe dans IE11 avec React + Babel + Webpack

J'essaie de faire fonctionner mon application React avec les fonctionnalités ES2015 dans IE> = 11 à l'aide de Webpack + Babel. La configuration est personnalisée et utilise la couche inferno-compat. Par conséquent, aucun create-react-app n'est utilisé ici. 

Cependant, malgré l'application des dernières pratiques babel-polyfill et babel-preset-env à ma config .babelrc et webpack, je reçois toujours un SCRIPT1002: Erreur de syntaxe dans mon bundle.js lorsque j'essaie d'accéder à l'application avec IE11.

Lorsque je suis la référence d'erreur de syntaxe dans la console d'IE, il s'agit de la partie en conflit dans bundle.js générée (la fonction de flèche en particulier):

function add(x, y) {
  if (y === undefined) {
    return yHolder => add(x, yHolder);
  }

  return x + y;
}

Ce sont les dépendances pertinentes au sein de mon package.json:

"dependencies": {
  "inferno-redux": "^3.10.1",
  "react": "^15.6.0",
  "react-dom": "^15.6.0",
  "react-ga": "^2.2.0",
  "react-swipeable": "^4.1.0",
  "redux": "^3.7.2",
  "redux-saga": "^0.16.0",
  "regenerator-runtime": "^0.11.0"
},
"devDependencies": {
  //... stuff

  "babel-cli": "^6.26.0",
  "babel-core": "^6.25.0",
  "babel-eslint": "^7.2.3",
  "babel-loader": "^7.1.1",
  "babel-plugin-inferno": "^3.2.0",
  "babel-plugin-module-resolver": "^2.7.1",
  "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
  "babel-plugin-transform-es2015-spread": "^6.22.0",
  "babel-plugin-transform-regenerator": "^6.26.0",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-flow": "^6.23.0",
  "babel-preset-react": "^6.24.1",

  //... some more stuff

  "webpack": "^3.8.1",
  "webpack-bundle-analyzer": "^2.9.1",
  "webpack-dev-middleware": "^1.12.2",
  "webpack-dev-server": "^2.9.5",
  "webpack-manifest-plugin": "^1.3.2",
  "webpack-merge": "^4.1.1",
}

C'est mon .babelrc:

{
  "presets": 
    [
    "react", 
    "flow",
    "es2015",
    [
      "env", { 
        "modules": "commonjs",
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        }
      }
    ]
  ]
}

J'inclus le babel-polyfill dans mon webpack.base.config.js ici:

// ... stuff
entry: {
  index: ['babel-polyfill', './index.js'],
},
// ... more stuff

Des idées qui manquent pour le faire fonctionner dans IE11?

javascriptreactjsinternet-explorerwebpackbabeljs
4
VoodooDS

J'ai trouvé le problème. J'utilise le module rambdax comme l'une de mes devDependencies, qui contient le code source écrit en syntaxe ES6 (non transpilé en ES5) - plus précisément, les fonctions de flèche => qui sont directement incluses dans mon bundle.js. Bien entendu, IE11 ne peut exécuter aucune fonction de flèche ni aucune autre syntaxe ES6.

Malheureusement, ni Babel, ni Webpack (plug-in UglifyJS) ne toucheront à la source des nœuds_modules importés lors de la compilation de bundle.js, ce qui signifie que: Le code source du module importé en tant que ES6 restera ES6 dans votre Webpack bundle.js.

Voir https://github.com/facebookincubator/create-react-app/issues/1125 pour plus d'informations sur ce sujet. 

J'ai également déjà déposé un problème concernant ce problème dans le référentiel ‘rambdax ’. Vous pouvez en savoir plus à ce sujet ici: https://github.com/selfrefactor/rambdax/issues/4

10
VoodooDS

Pas sûr que ce soit toujours un problème.

Avec Webpack 4 j'ai fait ça

 {
 test: /\.js$/,
 comprendre: [
 // chemin absolu vers le module 
 ] 
}

Les modules inclus passent par le crochet Babel.

0
Yanuxx