React JS：模块构建失败，渲染冒号中显示错误

Question

我收到这样的错误模块构建失败：SyntaxError 它在渲染函数的冒号中给了我错误

这是我的代码：

webpack.config.js

module.exports = {
entry : './main.js',
output : {
    path : './',
    filename : 'index.js'
},
devServer : {
    inline : true,
    port : 3333
},
module : {
    loaders : [
        {
            test : /\.js$/,
            exclude : /node_modules/,
            loader : 'babel',
            query :{
                presets : ['es2015', 'react']
            }
        }
    ]
}

package.json

{
  "name": "library",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.9.0",
    "babel-loader": "^5.3.2"
  }

main.js

    import React from 'react';
import ReactDom from 'react-dom';

var Heading = React.createClass({
    render : function() {
        return <th>{this.props.heading}</th>;
    }
});

var Headings = React.createClass({
    render : function(){
        var headings = this.props.headings.map(function(heading) {
            return(<Heading heading = {name}/>);
        });
        return (<thead><tr>{headings}</tr><thead>);
    }
});

var Row = React.createClass({
    render : function() {
        return  (
            <tr>
                <td>{this.props.changeSet.when}</td>
                <td>{this.props.changeSet.who}</td>
                <td>{this.props.changeSet.description}</td>
            </tr>
        );
    }
});

var Rows = React.createClass({
    render : function() {
        var rows = this.props.changeSets.map(function(changeSet) {
            return(<Row changeSet = {changeSet} />);
        });
        return <tbody>{rows}</tbody>;
    }
});

var App = React.createClass({
    render : function() {
        return  (
            <table className='table'>
                <Headings headings={this.props.headings} />
                <Rows changeSets={this.props.changeSets} />
            </table>
        );
    }
});


/* Data Declaration */
var data = [
    { 
        "when": "2 minutes ago",
        "who": "Jill Dupre",
        "description": "Created new account"
    },
    {
        "when": "1 hour ago",
        "who": "Lose White",
        "description": "Added fist chapter"
    },
    {
        "when": "2 hours ago",
        "who": "Jordan Whash",
        "description": "Created new account"
    }
];
var headings = ['When','Who', 'Description'];

/* Call to Render Function for entire app */
ReactDom.render(<App headings={headings} changeSets={data} />, document.getElementById('container'));

有人可以提供解决方案吗？我也包含了 babel-core 但无法找出问题所在。

Answer 1

我尝试在本地设置您的代码并解决了问题。

我收到 Module build failed: ReferenceError: [BABEL] - path to file 错误

原因是，babel 的节点 API 已移至 babel-core。因此从 dependencies 和 devDependencies，将 babel-loader 移动到您的 dependencies 并清除 package.json 文件的 devDependencies 并重新安装您的模块。它应该工作

上存在一些语法错误第 20 行 render : function(){

第 15 行未关闭的标签return (<thead><tr>{headings}</tr><thead>);

React JS：模块构建失败，渲染冒号中显示错误

React JS : Module Build Failuer, error showing in render colon

reactjs

react-jsx