babel-loader JSX SyntaxError: неожиданный токен [дубликат]
этот вопрос уже есть ответ здесь:
- Бабель файл копируется без преобразования 7 ответов
Я новичок в React + Webpack.
Я нашел странную ошибку в моем hello world web app.
Я использую babel-loader в webpack, чтобы помочь мне конвертировать jsx в js, но похоже, что babel не может понять синтаксис 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
правило.запрос уже устарел в пользу правила.опции. Использование в 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 до 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'] } },
вы можете найти действительно хороший шаблон, сделанный Henrik Joreteg (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 })