Babel-register not transpiling React with Webpack

Question

I'm trying to use babel-register with my webpack configuration. Here's my files:

.babelrc

{"presets": ["react","env"]}

webpack.config.js.

const path = require('path');

module.exports = {

    entry: {
        'app' : './src/app.jsx'
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },

    devServer: {
        contentBase: './dist',
        open: true
    }

};

package.json.

{
  "name": "react-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "node -r babel-register ./node_modules/webpack/bin/webpack.js",
    "debug": "node -r babel-register ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.1"
  }
}

The output error is:

ERROR in ./src/app.jsx
Module parse failed: Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|   <h1>Hello, world!</h1>,
|   document.getElementById('root')
| );
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.jsx
i ｢wdm｣: Failed to compile.

I don't understand why, launching webpack with node and babel-register module, last one don't transpile all subsequients files that encounters. I know that it's better using webpack modules for transpiling .js, .jsx but I wanted emulate example of debug and production mode in this repo: https://github.com/chentsulin/electron-react-boilerplate Thank you for the answers.

Answer 1

babel-register needs to be imported in the context of your source files, not webpack. Requiring it while running webpack will transpile webpack's code, but not your own.

One way would be to create another file, main.js for example, then import babel-register, followed by your app entry, and point the webpack entry at that:

import 'babel-register'
import './app.jsx'

Another easier way would be to add babel-register to your app entry in your webpack config, like so:

'app': ['babel-register', './src/app.jsx']