Webpack module assembly error failed (rails respond to assembly)

Question

I am working on handling / rails, creating and using webpack and babel for the first time. I use two files and get an error :

Mistake in. /app/assets/frontend/main.jsx
Module build error:
SyntaxError: /Users/cls/GitHub/rails_react/app/assets/frontend/main.jsx: Unexpected Token (6: 6)

Line 6: <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?

Answer 1

So with all the feedback, I was able to figure this out. Thanks to all who responded.

Here is what I need to do:

npm install babel-preset-es2015

npm install babel-preset-react

And create a .babelrc file ( thanks azium and Kreozot )

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

Answer 2

First, make sure you establish the reaction, babble and other addictions in your solution using

  npm install react --save 

then in the web package configuration file, enter presets in query , as shown 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 component. 'react': 'React' }, resolve: { // Include empty string '' to resolve files by their explicit extension // (eg require('./somefile.ext')). // Include '.js', '.jsx' to resolve files by these implicit extensions // (eg require('underscore')). extensions: ['', '.js', '.jsx'] } }; 

Answer 3

I think we are looking at the same course, "React.js on Rails: Creating a Full-Stack Web Application" by Samer Buna

To solve the problem, I installed these modules:

npm install react --save

npm install babel-preset-es2015

npm install babel-preset-react

And I use this configuration https://jsfiddle.net/daronwolff/11tgotvz/

Thanks @ milad-rezazadeh and @chrissavage