Webpack + Babel error

Question

I am trying to configure webpack and had everything up and running, but am now getting this same error. I've combed through a few other posts that seem to have been resolved by correcting spelling/grammar errors, but I can't seem to pinpoint anything wrong in my code. Is there something more serious happening?

ERROR in ./src/components/App/App.js
Module parse failed: /Users/Desktop/fred/src/components/App/App.js Unexpected token (7:11)
You may need an appropriate loader to handle this file type.
| 
|   render() {
|         return (
|           <h1>Hello</h1>;
|         );
|     };
| 
@ ./src/index.js 3:0-39
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index

Here is my webpack.config:

var path = require("path");
var webpack = require("webpack");
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/build/',
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.png', '.json']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: [
          autoprefixer
        ]
      }
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loaders: ['react-hot-loader', 'babel-loader']
      },
      {
        test: /\.jsx?$/,
        loaders: ['react-hot-loader', 'babel-loader']
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader?limit=10000',
      }
    ],
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

my App.js:

import React, { Component } from 'react';
import s from './App.scss';

class App extends Component {

  render() {
    return (
      <h1>Hello</h1>;
    );
  };

}

export default App;

my index.js:

import React from 'react';
import { render } from 'react-dom';
import App from './components/App/App';

let element = React.createElement(App, {});
render(element, document.querySelector('.container'));

my .babelrc:

{
  "presets" : ["es2015", "react", "stage-0"]
}

and my package.json:

{
  "name": "fred test",
  "version": "1.0.0",
  "description": "a fred test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "fred",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.0",
    "file-loader": "^0.11.1",
    "postcss": "^5.2.17",
    "postcss-loader": "^1.3.3",
    "precss": "^1.4.0",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "normalize.css": "^6.0.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }
}

Answer 1

You are using ES6 version of Javascript. You need preset config in webpack to understand and transpile that.

Can you try adding following to your webpack module config?

 loaders : [
      {
        test:/\.jsx?$/,
        exclude:/node_modules/,
        loader: 'babel-loader',
        query:{
          presets: ['es2015','react','stage-0']
        }
      },
      // ... 
   ]

Answer 2

The problem is that you defined both module.rules and module.loaders. Webpack completely ignores module.loaders (which only exists for compatibility reasons) whenever module.rules is present. In your case, all JavaScript rules are inside module.loaders, so none of them are being used.

To fix it put everything inside module.rules. And you also have two rules for .js files, as /\.js?$/ matches .j and .js, because ? means one or zero occurrences, similarly /\.jsx?$/ matches .js and .jsx, which is what you really want, and it doesn't make sense to have a rule for .j.

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loaders: ['react-hot-loader', 'babel-loader']
    },
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'postcss-loader']
    },
    {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
      loader: 'url-loader?limit=10000',
    },
    {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    }
  ]
}