Webpack avec babel-loader ne reconnaît pas le mot-clé import
j'ai ceci webpack.config.js
:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
loaders: [
{
test: /.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
};
...pourtant, je reçois toujours cette erreur:
$ webpack -v Hash: 2a9a40224beb025cb433 Version: webpack 1.10.5 Time: 44ms [0] ./src/admin/client/index.jsx 0 bytes [built] [failed] ERROR in ./src/admin/client/index.jsx Module parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved word You may need an appropriate loader to handle this file type. | import React from 'react'; | import AdminInterface from './components/AdminInterface';
j'ai:
- Installé
webpack
globalement et localement - Installé
babel-loader
,babel-core
etbabel-runtime
- Installé
babel-loader
globalement, juste au cas où
Pourquoi l'enfer est webpack apparemment ignorant <!--5? Ou n' babel-loader
fonctionne pas avec les modules?
mise à Jour:
Il ressemble à babel
gère très bien le fichier d'entrée. Lorsque j'exécute:
./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx
...c'sorties ES5 comme prévu. Par conséquent, il me semble en quelque sorte webpack
n'est pas correctement le chargement babel-loader
.
3 réponses
Cela ressemble à un cas d'erreur de l'opérateur. Mon webpack.config.js
la structure n'était pas correcte. Spécifiquement, j'avais besoin de mettre les détails du chargeur à l'intérieur d'un module
l'article:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
}
};
j'ai corrigé le même problème en incluant le es2015 et réagir presets et ensuite les ajouter au webpack.config.fichier js.
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
comme expliqué dans ce post: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
mon webpack.config.fichier js:
module.exports = {
context: __dirname + "/src",
entry: './main',
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
}
],
resolve: {
extensions: ['.js', '.jsx']
}
}
};
Quelle est la version de votre babel?Si la version de babel est jusqu'à 6+.Vous devez identifier le preset "es2015" et "réagir" comme ceci
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015']
}
}
]
}
N'oubliez pas d'installer ces modules:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev