试图将此错误调试数小时无法找到它的错误。 奇怪的错误! app.js
var React = require('react');
var app = React.createClass({
render() {
return (<h1>Hello World from Reach</h1>);
}
})
module.export = app;
APP-client.js
var React = require('react');
var App = require('./components/app');
React.render(<App />, document.getElementById('react-container'));
错误
ERROR in ./app-client.js
Module build failed: SyntaxError: /Users/alice/reactjs/app-client.js: Unexpected token (4:13)
2 | var app = require('./components/app');
3 |
4 | React.render(<app/>, document.getElementById('react-container'));
你有语法错误。 在app.js文件中创建类时,将render()
替换为render: function()
因此,您的app
分配应如下所示:
var app = React.createClass({
render: function(){
return (<h1>Hello World from Reach</h1>);
}
})
我认为问题出在你的webpack.config.js中。 为了成功构建jsx和ES6,您需要添加更多的加载器。 这是我建议的js loader配置,看看它是否适合你。
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-0']
}
},
es2015预设处理ES2015功能,您需要按照此处所述通过npm进行安装。 你肯定需要react预设来解析jsx。 第0阶段处理一些最新的JavaScript功能。
确保按照链接中的描述通过npm安装这些并更改您的web pack.config.js。