babel-loader jsx SyntaxError：意外的标记
我是React + Webpack的初学者。
我在你好世界的networking应用程序中发现了一个奇怪的错误。
我在webpack中使用babel-loader来帮助我把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)
谢谢你们。
添加“babel-preset-react”
npm install babel-preset-react
并在webpack.config.js中添加“预设”选项到babel-loader
（或者你可以把它添加到你的.babelrc或package.js中： http ://babeljs.io/docs/usage/babelrc/）
这里是一个webpack.config.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
如果您使用0.14反应，您应该使用ReactDOM.render() （来自require('react-dom') ）而不是React.render() ： https ： React.render()
从babel 5迁移到babel 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.config.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;
以下方式帮助我（包括反应热，babel装载机和es2015，反应预设）：
loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel?presets[]=es2015&presets[]=react'] } ]
对我来说，解决scheme是用这个内容创build文件.babelrc ：
{ "presets": ["react", "es2015", "stage-1"] }
这对我来说是完美的
{ test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015','react'] } },
你可以在这里find一个由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 })
对于那些仍然可能面临的问题添加jsxtesting固定它
test: /\.jsx?$/,
