How to configure Electron, Webpack, Babel, React and JSX?

Question

I am starting with Electron, and I am trying to configure the application to use React. I'm also new to React, Webpack, Babel, NPM ... pretty much the whole Node.js ecosystem and build tools. I started from scratch. I think I'm pretty close, but I'm stuck trying to compile my main JSX file:

$ webpack Hash: fa3346c3ff9bfd21133d Version: webpack 1.12.14 Time: 41ms [0] ./js/helloworld.jsx 0 bytes [built] [failed] ERROR in ./js/helloworld.jsx Module parse failed: /...path.../js/helloworld.jsx Line 5: Unexpected token < You may need an appropriate loader to handle this file type. | | ReactDOM.render( | <h1>Hello, world!</h1>, | document.getElementById('example') | ); 

Here is my package.json :

 { //... "dependencies": { "babel-preset-es2015": "~>6.6.0", "babel-preset-react": "^6.5.0", "electron-prebuilt": "^0.36.0", "react": "^0.14.7", "react-dom": "^0.14.7", "react-photonkit": "~>0.4.1", "webpack": "^1.12.14" } } 

... my .babelrc :

 { "presets": ["react"] } 

... my webpack.config.js :

 var path = require("path"); module.exports = { entry: path.resolve(__dirname, "js/helloworld.jsx"), output: { path: path.resolve(__dirname, "out"), publicPath: 'out/', filename: 'app.js' }, }; 

... and the helloworld.jsx file:

 var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); 

What am I doing wrong? How can I configure everything correctly?

Answer 1

You need to add babel-loader so that webpack knows how to use babel to process your files.

 $ npm install --save-dev babel-loader 

And then in your `webpack.config.js:

 module.exports = { entry: path.resolve(__dirname, "js/helloworld.jsx"), output: { path: path.resolve(__dirname, "out"), publicPath: 'out/', filename: 'app.js' }, module: { loaders: [ { test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ } ] } };