babel-loader JSX SyntaxError: неожиданный токен [дубликат]
этот вопрос уже есть ответ здесь:
- Babel файл копируется без преобразования 7 ответов
Я новичок в React + Webpack.
Я нашел странную ошибку в моем веб-приложении hello world.
Я использую babel-loader в webpack, чтобы помочь мне конвертировать jsx в js, но кажется как Вавилон не может понять синтаксис jsx.
вот мои зависимостей:
"devDependencies": {
"babel-core": "^6.0.14",
"babel-loader": "^6.0.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"react": "^0.14.1"
}
вот мой webpack.config.js
var path = require('path');
module.exports = {
entry: ['webpack/hot/dev-server',path.resolve(__dirname, 'app/main.js')],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
}
};
вот мой app/main.js
var React = require("react");
React.render(<h1>hello world</h1>,document.getElementById("app"));
и это сообщение об ошибке
ERROR in ./app/main.js
Module build failed: SyntaxError: ~/**/app/main.js: Unexpected token (2:13)
1 | var React = require("react");
> 2 | React.render(<h1>hello world</h1>,document.getElementById("app"));
| ^
at Parser.pp.raise (~/**/node_modules/babylon/lib/parser/location.js:24:13)
спасибо вам, ребята.
8 ответов
добавить "babel-preset-react"
npm install babel-preset-react
и добавьте опцию "пресеты" в babel-loader в вашем webpack.конфиг.js
(или вы можете добавить его в свой .babelrc или пакет.js:http://babeljs.io/docs/usage/babelrc/)
вот пример webpack.конфиг.js:
{
test: /\.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel",
query:
{
presets:['react']
}
}
недавно Babel 6 был выпущен, и произошли серьезные изменения: https://babeljs.io/blog/2015/10/29/6.0.0
если вы используете react 0.14, вы должны использовать ReactDOM.render()
(от require('react-dom')
) вместо React.render()
: https://facebook.github.io/react/blog/#changelog
обновление 2018
правило.запрос уже устарел в пользу Rule.опции. Использование в webpack 4 выглядит следующим образом:
npm install babel-loader babel-preset-react
затем в конфигурации webpack (как запись в модуле.массив правил в модуле.экспорт объекта)
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react']
}
}
],
}
я столкнулся с аналогичной проблемой при миграции из Вавилона 5 в Вавилон 6.
Я просто запускал babel для компиляции src to lib папку babel src --out-dir lib
я поделюсь своей настройкой для babel 6:
убедитесь, что у вас есть следующий babel 6 в разделе devDependencies установлен
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0"
добавить .babelrc файл проекта:
{
"presets": ["es2015", "stage-0", "react"]
}
Так как ответ выше все еще оставляет некоторые люди в темноте, вот что полный webpack.конфиг.js может выглядеть так:
var path = require('path');
var config = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
query:
{
presets:['es2015', 'react']
}
}]
},
};
module.exports = config;
для меня решением было создать файл .babelrc
С таким содержанием:
{
"presets": ["react", "es2015", "stage-1"]
}
мне помог следующий способ (включает react-hot, babel loaders и es2015, React presets):
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel?presets[]=es2015&presets[]=react']
}
]
это работает идеально подходит для меня
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015','react']
}
},
вы можете найти действительно хороший шаблон, сделанный Хенриком Йоретегом (ampersandjs) здесь:https://github.com/HenrikJoreteg/hjs-webpack
затем в webpack.config.js
var getConfig = require('hjs-webpack')
module.exports = getConfig({
in: 'src/index.js',
out: 'public',
clearBeforeBuild: true,
https: process.argv.indexOf('--https') !== -1
})
для тех, кто все еще может столкнуться с проблемой добавления jsx для тестирования исправлено для меня
test: /\.jsx?$/,