Module build failed: syntaxerror: Unexpected token (React config) - reactjs

Question

I'm having some sort of issue getting React to play nice with web pack and render in this project. I'm getting a syntax unexpected token error.
console error
here is my main.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class MyComponentClass extends React.Component {
render() {
return 'Test Component';
}
}
ReactDOM.render( <MyComponentClass />, document.getElementById('root'));
here is my Webpack.config file:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const config = {
entry: {
app: './client/scripts/main.js',
},
output: {
filename: 'app.js',
path: path.join(__dirname, 'public')
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
include: __dirname + '/client/scripts',
loader: 'babel-loader',
},
{
test: /\.css$/,
loader: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]'
}
},
{
loader: 'postcss-loader',
},
],
})),
},
{
test: /\.html/,
loader: 'html-loader',
},
{
test: /\.(jpe?g|png|gif)$/i,
loader: 'file-loader',
options: {
hash: 'sha512',
digest: 'hex',
name: 'images/[name].[ext]',
},
},
],
},
plugins: [
new ExtractTextPlugin({
filename: 'app.css',
ignoreOrder: true,
}),
new webpack.HotModuleReplacementPlugin()
],
resolve: {
extensions: ['.css', '.js'],
modules: [
path.join(__dirname, 'src'),
'node_modules',
],
},
devServer: {
contentBase: path.join(__dirname, "public"),
hot: true,
port: 8005,
}
};
module.exports = config;
And my package.json
{
"name": "jumpcloud-ui-assignment",
"version": "1.0.0",
"description": "A project that can be used to asses front end developers",
"repository": {
"type": "git",
"url": "git://github.com/TheJumpCloud/jumpcloud-ui-assignment.git"
},
"private": true,
"author": "JumpCloud",
"bugs": {
"url": "https://github.com/TheJumpCloud/jumpcloud-ui-assignment/issues"
},
"scripts": {
"start:client": "webpack-dev-server --progress --inline",
"start:server": "node server/server.js"
},
"dependencies": {
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"autoprefixer": "^7.1.6",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"css-hot-loader": "^1.3.3",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"postcss-loader": "^2.0.8",
"script-loader": "^0.7.2",
"style-loader": "^0.19.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
Im sure it's a webpack configuration issue, after scowering the other similar issues here im coming up blank.

Answer 1

Add a '.babelrc' file to your project containing
{
"presets": [ "es2015", "react" ]
}
And it should be ok