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:

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)

Line 6 is: <Greet />

This is the main.jsx file

import Greet from './greet';

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

This is the greet.jsx file:

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

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" }
    ]
  }
};

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:

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)

Line 6 is: <Greet />

This is the main.jsx file

import Greet from './greet';

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

This is the greet.jsx file:

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

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" }
    ]
  }
};

I don't have a babelrc file?

• javascript
• ruby-on-rails
• reactjs
• webpack
• babeljs

• Can you post your webpack config and your babelrc files? – azium Commented Jan 26, 2016 at 21:50
• 1 Also $(documentReady) is pletely unnecessary – azium Commented Jan 26, 2016 at 21:51
• Also do you have import React from 'react' at the top of your files that use JSX? Usually you need that. – azium Commented Jan 26, 2016 at 21:52
• I added the import React from 'react' and changed the $(documentReady) but I still have the same error – Chris L Savage Commented Jan 27, 2016 at 0:50
• 1 do you know what version of babel-core you have? If it's 6 then you need to add a bunch of stuff. (plugins, .babelrc file) – azium Commented Jan 27, 2016 at 2:24

3 Answers 3

First make sure to install react, babble and other dependencies in your solution using

   npm install react --save 

then in the web pack config file please include presets in the query similar to below:

   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 ponent.
    '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']
}
}; 

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

Here is what I needed to do:

npm install babel-preset-es2015

npm install babel-preset-react

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

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

I think we are watching same course 'React.js on Rails: Building a Full Stack Web App' by Samer Buna

To solve the problem i installed this modules:

npm install react --save

npm install babel-preset-es2015

npm install babel-preset-react

And i am using this configuration https://jsfiddle/daronwolff/11tgotvz/

Thanks to @milad-rezazadeh and @chrissavage