Unexpected token import - react

Question

I am new to react and webpack. Everytime i run the program i get this issue which i couldn't resolve. I went through the previous questions and tried their solutions yet still the problem remains the same.

webpack

module.exports = {
    entry: './src/App.js',
    output: {
        path: __dirname,
        filename: 'app.js',
},
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-0', 'react']
                },
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
            },
        ],
    },
};

App.js

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

var CommentBox = React.createClass({
    render: function () {
        return (
            <div className="CommentBox">
                Hello, world!I am Comment Box.
            </div>
        );
    }
});

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


package.json 
{
"name": "React-Examples",
"version": "1.0.0",
"description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Rakesh",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.14.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"react": "^15.1.0",
"react-dom": "^15.1.0"
 }}

Can you give more info about the error message? A screen shot or something? Does it give you a line number? And your code is all boxed together. Makes it a little difficult to understand the structure of your app. — Gregg, Sep 01 '16 at 13:38
@Gregg This is the error shown in the console of the browser.Screenshot-http://imgsrc.ru/rakesh_95/49799323.html — Renzous Rakesh, Sep 01 '16 at 13:49
@RenzousRakesh Do you have .babelrc file in your folder where webpack.config is present? — Dhananjaya Kuppu, Sep 01 '16 at 14:05
@DhananjayaKuppu I am sorry i am unaware of that. What is a babelrc file ? — Renzous Rakesh, Sep 01 '16 at 14:25
Possible duplicate of [Babel file is copied without being transformed](http://stackoverflow.com/questions/33440405/babel-file-is-copied-without-being-transformed) — Harkirat Saluja, Sep 01 '16 at 14:33
What you have in your package.json? and have you run the `npm install` command? — Hardy, Sep 01 '16 at 15:11
Feels precisely like you didn't do `npm install`. Please confirm you did. — rishat, Sep 01 '16 at 21:20
Then it's really crazy, nothing seems to be wrong. Do you maybe have a public repo? And just another suggestion: when you run out of ideas, try to init a new project and copy-paste your code into it. — rishat, Sep 02 '16 at 12:00
Is it possible your Babel loader `presets` are in the wrong order? I believe those get read from right-to-left, so perhaps `es2015` needs to be at the end of that array, not the beginning. — arthurakay, Sep 14 '16 at 17:34

score 0 · Answer 1 · answered Oct 16 '16 at 19:04

I copied your files and tried install it.

What I encountered is 'npm install' only install dependencies and does not install devDependencies. It happen sometimes...and it might be the case here.

Can you try

npm install --only=dev

Also you are missing one package, babel-preset-stage-0

npm install babel-preset-stage-0 --save-dev

and then try run webpack again?

Unexpected token import - react

1 Answers1