Babel-Loader not parsing ReactDom.render - reactjs

Question

I'm working on a React tutorial via Youtube and have matched his webpack.config and package.json files but I am getting a strange error when running webpack-dev-server
package.json
{
"name": "react-tutorials",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-stage-0": "^6.3.13",
"bootstrap-without-jquery": "^1.0.5",
"history": "^1.17.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router": "^1.0.3",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^1.15.0"
},
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot"
},
"author": "",
"license": "ISC"
}
webpack.config
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/client.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
./src/js/client.js
import React from "react";
import ReactDOM from "react-dom";
import Bootstrap from 'bootstrap-without-jquery';
import Layout from "./pages/Layout";
const app = document.getElementById('app');
ReactDOM.render(<div>/Hello</div>, app);
The file structure matches the tutorial source code so I don't think that is an issue. However when I run npm run dev I get the following error
Webpack Error
If I comment out line 10 of client.js webpack compiles with no issue. (ReactDOM.render function)

Answer 1

You have Webpack 1 installed, which has all the loader configurations in config.module.loaders, but your config uses config.module.rules which was introduces in Webpack 2.
Installing Webpack 4 should resolve your issue.
npm install -D webpack#latest