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
Module parse failed: /path/react/react-webpack-babel/app/app.js Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| import React from "react";
| import Greeting from "./greeting";
|

ERROR in ./index.html
Module parse failed: /path/react/react-webpack-babel/app/index.html Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
| <html>
|

Here is my webpack.configure.js

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

Here is the react components

app/greeting.js

import React from "react/addons";

export default React.createClass({
  render: function() {
    return (
      <div className="greeting">
        Hello, {this.props.name}!
      </div>
    );
  },
});

app/app.js

import React from "react/addons";
import Greeting from "./greeting";

React.render(
  <Greeting name="World"/>,
  document.body
);

app/index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Webpack + React</title>
  </head>

  <body></body>

  <script src="app.js"></script>

</html>

In case it's helpful, here's my package.json with dependencies

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Me",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^5.8.22",
    "babel-loader": "^5.3.2",
    "file-loader": "^0.8.4",
    "webpack": "^1.11.0"
  },
  "dependencies": {
    "react": "^0.13.3"
  }
}

Almouro · Accepted Answer · 2015-08-16 20:11:53Z

17

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 ;)

answered Aug 16, 2015 at 20:11

Almouro

6,5242 gold badges22 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mdd Over a year ago

Thank you so much! I've been trying to understand how the hot module replacement works with webpack but was stuck on this part. Thanks!!!

Abhinav Singi Over a year ago

I've added the loaders in its correct position as per your answer, also added the semi-color, I'm still getting the same error, do you know if it could be due to any other reason?

Almouro Over a year ago

@AbhinavSingi did you npm install the loaders? e.g. npm install --save-dev babel-loader file-loader or just npm install with Mdd's package.json?

Abhinav Singi Over a year ago

@Almouro I did npm install . But if I specify the version no. in the former method - both should yield same results, right?

Abhinav Singi Over a year ago

@Almouro apparently it's working fine now, I was require('webpack') in webpack.config.js which was causing some issues.

|

Daniel Lizik · Accepted Answer · 2016-03-27 04:17:31Z

1

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.

answered Mar 27, 2016 at 4:17

Daniel Lizik

3,1422 gold badges24 silver badges44 bronze badges

Collectives™ on Stack Overflow

Webpack error with react

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related