webpack not bundling with babel-loader and react - reactjs

Question

I am following along with a relatively older tutorial (from 2014) on RGR. I had to use an updated version of React, Webpack, and Babel so there are some differences. Everything has been working thus far except when I tried to compile JSX into webpack, it is giving me a build error.
ERROR in ./public/js/app.js
Module build failed: SyntaxError: Unexpected token (7:15)
5 | class Hello extends React.Component {
6 | render() {
7 | return <h3>Hello Webpack!</h3>;
| ^
8 | }
9 | }
10 |
Below is my React file:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
render() {
return <h3>Hello Webpack!</h3>;
}
}
ReactDOM.render(<Hello />, document.getElementById('react'));
and this is my webpack.config.js file
module.exports = {
entry: "./public/js/app.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [
{test: /\.js$/,
loader: 'babel-loader' }
]
}
}
Also, here is my package.json file
{
"name": "rgrjs",
"version": "1.0.0",
"description": "a collection of educational resources about React, GraphQL, and Relay",
"main": "index.js",
"scripts": {
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/krisxcrash/rgr-stack.git"
},
"author": "kristine martin",
"license": "ISC",
"bugs": {
"url": "https://github.com/krisxcrash/rgr-stack/issues"
},
"homepage": "https://github.com/krisxcrash/rgr-stack#readme",
"dependencies": {
"babel-loader": "^7.1.2",
"create-react-class": "^15.6.2",
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1"
}
}
Can anyone tell me why it is not reading the <h3> after return and causing an error when webpack is trying to bundle?

Answer 1

You're missing some presets:
First do npm install:
npm install babel-core babel-preset-es2015 babel-preset-react --save-dev
Also make a .babelrc in your root project directory, and include this:
{
"presets": ["es2015","react"]
}
Also in your loaders section of webpack config, include this for jsx:
{ test: /\.jsx?$/, exclude: /node_modules/, use: ['babel-loader'] }