Module build failed: SyntaxError: Unexpected token

Question

I am new to react. I a encountering an weired error and this leaves me perplexed! To my understanding nothing wrong in the syntax in index.jsx which is given below.

>  7 |          <div>
     |          ^

My index.js is

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
render() {
    return (
        <div>
        <p>Hi Russell!!</p>
        </div>
    );

}
}

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

My package.json is

const webpack = require('webpack');
const path = require('path');

var APP_DIR = path.resolve(__dirname, 'src/client/app');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');

var config = {
entry: APP_DIR + '/index.jsx',
output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
},
module: {
    loaders: [
        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel-loader'
        }
    ]
}
}

module.exports = config;

I have reviewed every possible part of this. In spite of this, I am not able to figure out what is wrong. It still throws me the error. Any help on how to debug this?

The error pops up when I try to run

webpack -d

If I start by

npm run serve

The browser opens without rendering anything on the page. This leaves me in

Many thanks in advance.

I have solved this issue by adding, query: {

Bussller
– Bussller

2017-07-15 11:44:18 +00:00
Commented Jul 15, 2017 at 11:44 — Bussller
– Bussller, Commented Jul 15, 2017 at 11:44

George Linardis · Accepted Answer · 2017-10-27 22:25:06Z

3

I encountered the same problem and solved it by adding a .babelrc file in the root folder.

After installing babel-preset-env and babel-preset-react I created the .babelrc file and set it by typing:

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

answered Oct 27, 2017 at 22:25

George Linardis

1303 silver badges12 bronze badges

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

Comments

Bussller · Accepted Answer · 2017-07-15 11:49:45Z

0

Solved this issue, by adding the following to the webpack.config.js as follows,

/*Previous Code*/
query: {
      presets: ['es2015', 'react']
}
/*Remaining closure of brackets*/
module.exports = exports;

However, I have a question, I had this added in my .bablerc as follows,

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

Why has that not been taken? Any suggestions?

answered Jul 15, 2017 at 11:49

Bussller

2,0856 gold badges42 silver badges54 bronze badges

1 Comment

Stanislav Mayorov Over a year ago

it's better to use new options syntax instead of query.

Collectives™ on Stack Overflow

Module build failed: SyntaxError: Unexpected token

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related