Webpack模块构建失败：意外的标记（Rails React构建）

Question

我正在使用React/Rails进行构建工作，并首次尝试使用Webpack和Babel。我在使用两个文件，并获取错误：

ERROR in ./app/assets/frontend/main.jsx
      模块构建失败：
      SyntaxError：/Users/cls/GitHub/rails_react/app/assets/frontend/main.jsx：意外的token（6: 6）

第6行是：<Greet />

这是main.jsx文件

import Greet from './greet';

class Main extends React.Component {
    render() {
        return (
            <Greet />
        );
    }
}
let documentReady = () => {
    React.render(
        <Main />,
        document.getElementById('react')
    );
};
$(documentReady);

这是greet.jsx文件：

export default class Greet extends React.Component {
    render() {
        return <h2>Hello There</h2>
    }
}

这是我的webpack.config文件:

module.exports = {
  entry: "./app/assets/frontend/main.jsx",
  output: {
    path: __dirname + "/app/assets/javascripts",
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      { test: /\.jsx$/, loader: "babel-loader" }
    ]
  }
};

我没有babelrc文件？

- chrissavage

---

另外，$(documentReady) 完全是不必要的。 - azium

你的代码文件顶部有import React from 'react' 这句话吗？通常你需要它，尤其是在使用JSX的时候。 - azium

我添加了 import React from 'react' 并更改了 $(documentReady)，但仍然出现相同的错误。 - chrissavage

你知道你有哪个版本的babel-core吗？如果是6的话，你需要添加很多东西。（插件、.babelrc文件） - azium

我在Pluralsight上跟着课程学习，但遇到了同样的问题。 - Yumiko

Answer 1

首先，请确保在您的解决方案中安装了 React、Babel 和其他依赖项，使用以下命令：

   npm install react --save 

然后在webpack配置文件中，请在query中包含以下类似的presets：

   module.exports = {
entry: 'main.jsx',
output: {
    // Output the bundled file.
    path: './src',
    // Use the name specified in the entry key as name for the bundle file.
    filename: 'bundle.js'
},
module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            presets: ['react']
        }
    }]
},
externals: {
    // Don't bundle the 'react' npm package with the component.
    'react': 'React'
},
resolve: {
    // Include empty string '' to resolve files by their explicit extension
    // (e.g. require('./somefile.ext')).
    // Include '.js', '.jsx' to resolve files by these implicit extensions
    // (e.g. require('underscore')).
    extensions: ['', '.js', '.jsx']
}
}; 

- Milad Rezazadeh

---

谢谢，问题已经解决了。 - Yumiko

Answer 2

在得到所有反馈后，我成功解决了问题。谢谢所有提供答案的人。

这是我需要做的：

npm install babel-preset-es2015

npm install babel-preset-react

并创建一个.babelrc文件（感谢azium和Kreozot）。

`{
  "presets": [
    "react",
    "es2015"
  ]
}`

- chrissavage

---

在Rails项目中，应该把这个文件放在哪里？还有上面的npm install命令应该在哪里运行？ - simo

Answer 3

我觉得我们正在观看同一门课程《React.js on Rails: Building a Full Stack Web App》，讲师是Samer Buna。

为了解决问题，我安装了以下模块：

npm install react --save

npm install babel-preset-es2015

npm install babel-preset-react

并且我正在使用这个配置 https://jsfiddle.net/daronwolff/11tgotvz/

感谢@milad-rezazadeh和@chrissavage的帮助。

- daronwolff