Webpack模块构建失败的意外令牌(rails react build) [英] Webpack module build failed unexpected token (rails react build)

问题描述

我从事React/rails构建工作，并首次使用webpack和babel进行工作.我正在使用两个文件，并收到错误:

I working on a react/rails build and working through using webpack and babel for the first time. I'm using two files and getting the error:

./app/assets/frontend/main.jsx中的错误
模块构建失败:
语法错误:/Users/cls/GitHub/rails_react/app/assets/frontend/main.jsx:意外令牌(6:6)

ERROR in ./app/assets/frontend/main.jsx
Module build failed:
SyntaxError: /Users/cls/GitHub/rails_react/app/assets/frontend/main.jsx: Unexpected 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:

This is my 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文件?

I don't have a babelrc file?

推荐答案

因此，在给出所有反馈的情况下，我能够弄清楚这一点.谢谢所有回答的人.

So with all the feedback given I was able to figure it out. Thank you to everyone who answered.

这是我需要做的:

npm install babel-preset-es2015

npm install babel-preset-react

并创建一个.babelrc文件(感谢Azium和Kreozot )

And create a .babelrc file (thank you to azium and Kreozot)

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

这篇关于Webpack模块构建失败的意外令牌(rails react build)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！