web-dev-qa-db-fra.com

`Importation inattendue de jetons` dans` webpack.config.babel.js` lors de l'utilisation de {modules: false} `

J'ai un projet React qui utilise Webpack en tant qu'ensemble de modules et babel-loader pour le transformer en ES5, en utilisant les paramètres suivants:

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader"
        }
      ]
    }
  ]
},

Les options sont définies dans un fichier autonome .babelrc.

Babel 6.13.0 prend en charge les modules ECMAScript, ce qui signifie que les modules ECMAScript n'ont pas besoin d'être d'abord transformés en modules CommonJS. Pour obtenir ce comportement, la documentation indique que nous devrions utiliser ce paramètre dans notre .babelrc.

{
  presets: [["es2015", { "modules": false }], "react"]
}

Cependant, lorsque j'essaie d'exécuter Webpack avec ce paramètre, l'erreur suivante apparaît:

$ ./node_modules/.bin/webpack
/home/d4nyll/foo/bar/webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
                                                              ^^^^^^
SyntaxError: Unexpected token import

J'imagine que c'est parce que babel-loader n'agit pas sur webpack.config.babel.js et qu'il ne reconnaît donc pas le mot clé import. L'erreur n'apparaît pas lorsque { "modules": false } est supprimé, mais je souhaite cette fonctionnalité. Comment faire en sorte que Babel reconnaisse webpack.config.babel.js?

javascriptwebpackecmascript-6babeljswebpack-2
18
d4nyll

Ce qui suit a fonctionné pour moi.

Définissez .babelrc comme suit:

{
  "presets": ["es2015"]
}

Les paramètres .babelrc s’appliqueraient au fichier webpack.config.babel.js.

Ensuite, modifiez la configuration de Webpack pour inclure les options à appliquer au code de votre application.

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
          options: {
            "presets": [["es2015", {"modules": false}], "react"]
          }
        }
      ]
    }
  ]
},
14
d4nyll

Juste pour souligner, comme vous le savez probablement: Votre erreur 

`Unexpected token import` in `webpack.config.babel.js`...

a rien à voir avec ce que vous construisez, uniquement avec votre webpack.config.babel.js. Malgré son nom, ES6 ne fonctionnera pas sans quelques précautions.

Choses à s'assurer:

1) vous n’avez pas besoin dewebpack.config.js, lorsque vous avez un webpack.config.babel.js dans votre projet.

2) assurez-vous que dans votre package.json, vous êtes sur Webpack version 3 ou supérieure pour (1) tenir vrai

3) assurez-vous que vous avez un .babelrc contenant au moins env ou es2015

{ "presets": ["env"] }

4) assurez-vous d’avoir installé les deux suivants

npm install babel-cli --save-dev
npm install babel-preset-env --save-dev

Respectivement babel-preset-es2015 en fonction de votre .babelrc. ( lisez ici pourquoi env est sans doute un peu plus froid.)

8
Frank Nocke

Si vous utilisez Webpack 2.6+ où import est intégré, assurez-vous d'utiliser ce plugin babel: https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import

1
publicJorn