CODEWITHSUNDEEP
javascriptwebpackreactjswebpack-dev-server
The Hurricane
The Hurricane

Reputation: 199

Webpack not working when React is introduced

I have followed the main tutorial on webpack and I have got the server up and running. When I change files, it will update on save, all is good. However, I then introduced React and it all went wrong.

Firstly, I am getting this error in the browser: 

Unexpected token <
You may need an appropriate loader to handle this file type.

This is pointing to line 4 in my entry.js file:

var CommentBox = React.createClass({
  render: function() {
    return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.
        </div>
    );
  }
});
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);

This is index.html

<html>
<head>
    <meta charset="utf-8">
</head>
<body>

    <div id ="content"></div>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

webpack.config.js:

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'jsx-loader?insertPragma=React.DOM&harmony'
      }
    ]
  },
  externals: {
    'react': 'React'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};

If I change the entry.js file to just contain:

document.write(require("./content.js"));

It produces what I currently have in the content.js file:

module.exports = "this is working";

So therefore it is something to do with react/jsx etc. Anyone got any solutions to this? I have seen other people online with this issue but the solutions given have not worked for me so far.

Upvotes: 5

Views: 1966

Answers (2)

Vincent Taing
Vincent Taing

Reputation: 3334

Like FakeRainBrigand said jsx-loader is deprecated, if you want to convert es6 or jsx, you will probably want to use babel-loader. And since Babel 6 was released now you will have to explicitely declare which transformation to perform by setting "presets" in a .babelrc file like this :

$ npm install --save-dev babel-loader

$ npm install --save-dev babel-preset-es2015

$ npm install --save-dev babel-preset-react

{
  "presets": ["es2015","react"]
}

webpack.config.js

module: {
    loaders: [
        { test: /\.css$/, loader: "style!css" },
        { 
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
        },
        { 
            test: /\.jsx$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['react']
            }
        },             
    ]
},

Upvotes: 2

user5548116
user5548116

Reputation:

Webpack and jsx-loader

webpack.config.js

module.exports = {
  entry: './app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js/,
      loader: 'jsx-loader'
    }]
  }
}

app.js

var React = require('react');

var App = React.createClass({
  render: function() {
    return <h1>Hello World</h1>
  }
})

React.render(<App/>, document.getElementById('app'))

and simple index.html file with a <div>

Possible you would like to use React with a ES6 syntax (React webpack and babel) so: i hope my post will be useful for you.

Update:

As FakeRainBrigand told jsx-loader is depricated, it would be good if you gonna try to use a babel-loader instead of jsx-loader

Thanks

Upvotes: 1

Related Questions