Erreur de chargement de Webpack Babel – SyntaxError non détecté: importation de token inattendue

Je suis nouveau sur Webpack et j'ai rencontré un problème suite à ce tutoriel .

Il semble que le webpack.config.js ne configure pas correctement babel-loader mais je ne suis pas sûr. Dans la console, je vois l'erreur suivante:

 bundle.js:49 Uncaught SyntaxError: Unexpected token import

Ce qui se réfère à l' import sortBy from 'lodash/collection/sortBy'; ligne import sortBy from 'lodash/collection/sortBy'; De mon index.js . Donc, je suppose que c'est un problème de transbordement babel (ne permettant pas la syntaxe d' import de ES6?)

Voici le fichier index.js complet

 import sortBy from 'lodash/collection/sortBy'; import {users} from './users'; import {User} from './User'; sortBy(users, 'name') .map(user => { return new User(user.name, user.age); }) .forEach(user => { console.log(user.display); });

Et webpack.config.js ressemble à ceci:

 module.exports = { entry: './src/index.js', output: { path: './public/', filename: 'bundle.js' }, devServer: { contentBase: './public/' }, module: { loaders: [ {test: /\.js$/, exclude: /node_modules/, loader: 'babel'} ] } }

J'ai cherché à travers d'autres questions qui ont l'air de se rapporter au problème ici et ici , ainsi que de google, mais n'ont pas trouvé de solution ou la raison pour laquelle j'ai toujours eu l'erreur. Peut-être que le didacticiel est obsolète. Des conseils sur la façon de résoudre ce problème seraient très appréciés!

METTRE À JOUR

L'erreur spécifique de chargement de babel a été résolue en suivant les étapes décrites dans la réponse postée ci-dessous par Alexandre Thebaldi.

Cependant, une nouvelle erreur s'est produite – Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

Si vous travaillez à travers ce tutoriel et que vous rencontrez cette erreur, il est probablement causé par un chemin incorrect dans l' index.js , en particulier le fait que le lodash/collections semble n'exister plus. J'ai réussi à résoudre cette deuxième erreur en modifiant simplement le chemin vers lodash/sortBy .

REMARQUE

Assurez-vous de vérifier d'abord que lodash est installé dans node_modules et le chemin d'accès est correct manuellement avant de le modifier.

Tout d'abord, assurez-vous d'avoir installé babel core et loader en utilisant:

$ npm install --save-dev babel-loader babel-core

Donc, le chargeur correct est babel-loader et pas babel . La configuration doit être:

 module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }

En fait, vous devez informer Babel pour transformer votre code.

Pre-6.x, Babel a activé certaines transformations par défaut. Toutefois, Babel 6.x ne s'effectue pas avec des transformations activées. Vous devez indiquer explicitement les transformations à exécuter. La manière la plus simple de le faire est d'utiliser un préréglage, tel que l'ES2015 Preset. Vous pouvez l'installer avec.

 $ npm install babel-preset-es2015 --save-dev

Après l'installation prédéfinie, vous devez l'activer.

Créez une configuration .babelrc dans votre racine de projet et activez quelques plugins.

En supposant que vous avez installé le pré-réglage ES2015, afin de l'activer, vous devez le définir dans votre fichier .babelrc , comme ceci:

 { "presets": ["es2015"] }

Détails dans Babel Setup page.

Mikeym

C'est un problème avec le babel-loader et ES6.

Pouvez-vous changer votre webpack.config.js à ceci:

  module.exports = { entry: './src/index.js', output: { path: './public/', filename: 'bundle.js' }, devServer: { contentBase: './public/' }, module: { loaders: [ {test: /\.js$/, exclude: /node_modules/, loader: 'babel?presets[]=es2015' } ] } }