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

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