CODEWITHSUNDEEP
javascriptreactjs
Alien Xu
Alien Xu

Reputation: 193

webpack error unexpected token

Trying to debug this error for hours couldn't find what's wrong with it. Strange error! app.js

var React = require('react');

var app = React.createClass({
    render() {
        return (<h1>Hello World from Reach</h1>);
    }
})

module.export = app;

app-client.js

var React = require('react');
var App = require('./components/app');

React.render(<App />, document.getElementById('react-container'));

The error 

ERROR in ./app-client.js
Module build failed: SyntaxError: /Users/alice/reactjs/app-client.js: Unexpected token (4:13)
2 | var app = require('./components/app');
3 | 
4 | React.render(<app/>, document.getElementById('react-container'));

Upvotes: 1

Views: 677

Answers (2)

takacsmark
takacsmark

Reputation: 4441

I think the issue is in your webpack.config.js. In order to successfully build jsx and ES6 you need to add more loaders. Here is my suggested js loader config, see if it works for you.

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

The es2015 preset handles ES2015 features, you need to install via npm as described here. You definitely need the react preset to parse jsx. Stage 0 handles some of the latest javascript features.

Make sure you install these via npm as described in the links and change your web pack.config.js.

Upvotes: 1

Andriy Ivaneyko
Andriy Ivaneyko

Reputation: 22021

You have syntax error. Within creating class in app.js file replace render() to render: function() So your app assignment should looks like code below:

var app = React.createClass({
    render: function(){
        return (<h1>Hello World from Reach</h1>);
    }
})

Upvotes: 2

Related Questions