Question

webpack 错误意外的 token

2016-01-22

674

javascript reactjs

尝试调试此错误数小时，但找不到问题所在。奇怪的错误！ 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 加载器配置，看看它是否适合您。

loaders: [
    {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {                 
            presets: ['es2015', 'react', 'stage-0']
        }
},

es2015 预设处理 ES2015 功能，您需要按照此处所述通过 npm 安装。您绝对需要 react 预设来解析 jsx。 Stage 0 处理一些最新的 javascript 功能。

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