Webpack error with react

Question

I am trying to configure webpack according to this tutorial and keep getting the same error. I am having trouble debugging these 2 messages:

ERROR in ./app.js
M         


        

Answer 1

the loaders option should be nested in a module object like so:

module.exports = {
  context: __dirname + '/app',
  entry: {
    javascript: "./app.js",
    html: "./index.html"
  },
  output: {
    filename: 'app.js',
    path: __dirname + '/dist'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader']
      },
      {
        test: /\.jsx$/,
        loaders: ['babel-loader']
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]"
      }
    ]
  }
};

I also added a missing semi-colon at the end ;)

Answer 2

When I was importing with the syntax

import Component from './components/component';

I was getting the module parse error. To fix it, I had to specify .jsx and it worked

import Component from `./components/component.jsx`. 

It wasn't a config error at all. I'm on babel 6 with hot loader.