Modulo Webpack non riuscito Token imprevisto (le rotaie reagiscono build)

Question

Io lavoro su una build react/rails e sto lavorando usando webpack e babel per la prima volta. Sto utilizzando due file e ottenere l'errore:

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)

Linea 6 è: <Greet />

Questo è il file main.jsx

import Greet from './greet'; 

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

Questo è il saluto file .jsx:

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

Questo è il mio 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" } 
 
    ] 
 
    } 
 
};

non ho un file babelrc?

Answer 1

Quindi con tutto il feedback dato sono stato in grado di capirlo. Grazie a tutti coloro che hanno risposto.

Ecco cosa dovevo fare:

npm install babel-preset-es2015

npm install babel-preset-react

e creare un file .babelrc (grazie a azium e Kreozot)

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

Answer 2

Prima di tutto assicuratevi di installare reagire, chiacchiere e altre dipendenze nella soluzione utilizzando

npm install react --save 

poi nel file di configurazione Web Pack comprende presets nel query simile al di sotto:

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

Answer 3

Penso che stiamo guardando stesso corso 'React.js on Rails: Costruire uno stack completo Web App' da Samer Buna

Per risolvere il problema ho installato questo moduli:

npm install react --save

npm install babel-preset-es2015

npm install babel-preset-react

e sto usando questa configurazione https://jsfiddle.net/daronwolff/11tgotvz/

Grazie a @ Milad-Rezazadeh e @chrissavage