Kompilacja modułu Webpack nie powiodła się nieoczekiwanego tokena (szyny reagują na kompilację)

Question

Pracuję nad wersją reagowania/szyn i pracuję przy użyciu pakietu internetowego i babelki po raz pierwszy. Używam dwóch plików i uzyskiwanie błąd:

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)

Linia nr 6: <Greet />

Jest to plik main.jsx

import Greet from './greet'; 

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

To pozdrawiam Plik .jsx:

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

To mój 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" } 
 
    ] 
 
    } 
 
};

Nie mam plik babelrc?

Answer 1

Po otrzymaniu wszystkich opinii udało mi się to rozgryźć. Dziękuję wszystkim, którzy odpowiedzieli.

Oto, co potrzebne do zrobienia:

npm install babel-preset-es2015

npm install babel-preset-react

i utworzyć plik .babelrc (dziękuję azium i Kreozot)

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

Answer 2

Najpierw upewnij się, aby zainstalować reagować, bełkot i inne zależności w rozwiązania z użyciem

npm install react --save 

następnie w pliku konfiguracyjnym pakietu internetowej prosimy o umieszczenie presets w query podobny do poniżej:

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

myślę, że oglądają ten sam kurs 'React.js on Rails: Budowanie Pełna stosu Web App' przez Samer Buna

Aby rozwiązać ten problem i zainstalowano moduły:

npm install react --save

npm install babel-preset-es2015

npm install babel-preset-react

i używam takiej konfiguracji https://jsfiddle.net/daronwolff/11tgotvz/

Dzięki @ Milad-rezazadeh i @chrissavage