Webpack module build failed unexpected token (rails react build)

问题:

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?

回答1:

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

回答2:

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

回答3:

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.net/daronwolff/11tgotvz/

Thanks to @milad-rezazadeh and @chrissavage

文章来源: Webpack module build failed unexpected token (rails react build)