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预设handles ES2015 features, you need to install via npm as described here. 你肯定需要react preset to parse jsx. Stage 0 handles some of the latest javascript features.

确保按照链接中的说明通过npm安装这些内容并更改您的web pack.config.js。

webpack错误意外令牌

2 个答案: