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 () { }

Could you try use a file .babelrc with the following content: { "presets": ["es2015", "react"] }, and I think that your path.resolve should not be 'htlm' — Alessander Franca
– Alessander Franca, Commented Aug 3, 2016 at 12:13
Shouldn't there be a ; after import {Controller} from "./Controller/index.js" ? (just wondering) — David R
– David R, Commented Aug 3, 2016 at 12:14
@DavidR ; is not mandatory. @ Alessander França It works fine when i remove require of my stand alone application. I am using import many times else where. .babelrc file is available at both place inside node module and react application root — Ashisha Nautiyal
– Ashisha Nautiyal, Commented Aug 3, 2016 at 12:18

robertklep · Accepted Answer · 2016-08-03 12:22:42Z

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') ]

This works for me too, but the better solution will be to set up and run a build on my library (or Ashisha's stand-alone-app) which includes compiling the es6 with Babel. Then the 'dist' version will be ready to use as is, just like any other npm package.

Collectives™ on Stack Overflow

Uncaught SyntaxError:` Unexpected token import

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related