Uncaught SyntaxError:` Unexpected token import

Question

I am working on a react application. Where I am using webpack and babel loader. In my react application I am using import statement many times which is working fine.

Now I have My another stand alone application which is working fine. Now I am installing my standalone application in react application using npm. So I do

let standAloneApplication =  require("my_stand_alone_application")

But I get import error inside the standAloneApplication. Where I have a line import controller from "./controller" // Main.js:1Uncaught SyntaxError: Unexpected token import

where as import statement in React application works fine. also the stand alone application work fine at alone. but together It's giving SyntaxError

my webpack file

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

var BUILD_DIR = path.resolve(__dirname, 'html');
var APP_DIR = path.resolve(__dirname, 'html');

var config = {
  entry: APP_DIR + '/app.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
   devtool: "source-map",
   node: {
     fs: "empty"
   } ,
      module : {
    loaders : [
      {
        test : /\.js?/,
        include : APP_DIR,
        exclude: /node_modules/,
        loaders: ['babel?presets[]=react,presets[]=es2015,plugins[]=transform-decorators-legacy,plugins[]=transform-class-properties,plugins[]=transform-export-extensions'],
      },

      { test: /\.json$/, loader: "json" }
    ]
  }
}

module.exports = config;

main.js Code from stand alone application

import {Controller} from "./Controller/index.js"

export class Main () {

} 

Solution

Notice the exclude: /node_modules/ in your loader setup.

Since you installed your app/module using npm, it's located in that directory, and because of the exclusion it will not be transpiled by Babel.

Perhaps, but I'm not sure, you can add it explicitly to the include line:

include : [
  APP_DIR,
  path.resolve(__dirname, 'node_modules/my_stand_alone_application')
]