'import' issue with React, webpack hot reload

Question

I have an issue in my react project. I am using webpack dev server to serve my files. the webpack build is successful but I am getting an error on the browser like

"app.js:7 Uncaught SyntaxError: Unexpected token import"

in the line:

import React from 'react';

Below is my webpack.config.js

module.exports = {
context: __dirname + "/app",    
entry: "./app.js",     output: {
    filename: "app.build.js",
    path: __dirname + "/dist",
},

module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ["react-hot-loader", "babel-loader"],
        },
        {
            test: /\.html$/,
            loader: "file?name=[name].[ext]",
        },            

        { 
            test: /\.js$/, 
            exclude: /node_modules/, 
            loaders: ["react-hot-loader", "babel-loader"],
        }

    ]
}    
};

And in my .babelrc I have

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

I have tried adding various babel configs like using stage-0, stage-2, etc., but none of them worked. Is there any way to fix this.

Try this https://stackoverflow.com/questions/38405514/webpack-babel-loading-error-uncaught-syntaxerror-unexpected-token-import — Vipul Singh, Jul 24 '17 at 20:43
One thing for certain is that you don't need both the `.jsx?` and `.js` loaders. The first will match the file extension with or without an `x`. — Hacknightly, Jul 24 '17 at 22:20
@Jose, I don't see any es6 syntax in app.build.js. also I am referring to app.js in index.html(which I open in browser). app.build.js is what is generated after giving build, watch command from webpack. but for hot reloading via dev server app.js should be referred. please correct me if I am wrong. — prabhu vijay, Jul 24 '17 at 22:22
@VipulSingh, I have already tried installing the npm libraries but nothing helped. — prabhu vijay, Jul 24 '17 at 22:24
@Hacknightly, you are correct. but I think the issue lies somewhere else. — prabhu vijay, Jul 24 '17 at 22:26

score 0 · Accepted Answer · answered Aug 02 '17 at 18:09

I found answer to my own question:

The way react hot loader works is the output file app.build.js mentioned in the webpack config.js is served by the hot loader server directly but not created under specific path(dist/) as mentioned in config.

so localhost/app.build.js is available instead of localhost/dist/app.build.js.

when I refer "script src="app.build.js" in my index.html it started working.

The file app.build.js is created in path ("/dist") only for "webpack" or "webpack --watch" command. not for "webpack-dev-server" command.

'import' issue with React, webpack hot reload

1 Answers1