Ошибка при запуске пакета Webpack

Question

Я использую Rails 5 с ответом с webpack 2.1.0-beta.7. С драгоценными камнями «рельсы-рельсы», «~> 1,7,0».

Однако я получал эту ошибку каждый раз, когда я пытаюсь запустить webpack.

Hash: 3aea6d8a27453c0be041 
Version: webpack 2.1.0-beta.7 
Time: 507ms 
    + 1 hidden modules 

ERROR in ./app/assets/frontend/main.jsx 
Module build failed: SyntaxError: /mnt/data/Projects/kasih.in-dev/kasih.in/app/assets/frontend/main.jsx: Unexpected token (5:8) 
    3 | render() { 
    4 |  return (
> 5 |   <h1>Hello world</h1> 
    |  ^
    6 | ); 
    7 | } 
    8 | } 
    at Parser.pp.raise (/mnt/data/Projects/kasih.in-dev/kasih.in/node_modules/babylon/lib/parser/location.js:22:13) 
    at Parser.pp.unexpected (/mnt/data/Projects/kasih.in-dev/kasih.in/node_modules/babylon/lib/parser/util.js:89:8) 

Вот мой WebPack конфигурации:

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

В случае, если вам это нужно, вот мой JSX файл:

class Main extends React.Component { 
    render() { 
    return (
     <h1>Hello world</h1> 
    ); 
    } 
} 

let documentReady =() => { 
    React.render{ 
    <Main />, 
    document.getElementById('main'); 
    }; 
}; 

$(documentReady); 

Мне интересно, что причина этой ошибки и как Исправить это?

Answer 1

Вам нужно установить несколько пакетов, react и es2015,

npm i --save-dev babel-preset-react babel-preset-es2015 

, а затем добавить эти пресеты в вашей WebPack конфигурации

loaders: [{ 
    test: /\.jsx$/, 
    loader: "babel-loader", 
    query: { 
    presets: ['es2015', 'react'] 
    } 
}]