webpack错误意外令牌

Question

试图将此错误调试数小时无法找到它的错误。 奇怪的错误！ 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'));

Answer 1

你有语法错误。 在app.js文件中创建类时，将render()替换为render: function()因此，您的app分配应如下所示：

var app = React.createClass({
    render: function(){
        return (<h1>Hello World from Reach</h1>);
    }
})

Answer 2

我认为问题出在你的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。