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 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.

• javascript
• reactjs
• webpack
• babeljs

Share Improve this question Follow asked Jul 15, 2017 at 11:31 BussllerBussller 2,01166 gold badges4242 silver badges5252 bronze badges 1

• I have solved this issue by adding, query: { – Bussller Commented Jul 15, 2017 at 11:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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" ] }

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?