Webpack/Babel ES6 error: Uncaught SyntaxError: Unexpected token import

Question

I am very new to ES6 so forgive me if this a duplicate question. As the title states I'm currently receiving the error:

Uncaught SyntaxError: Unexpected token import

Obviously the object Person has not been successfully imported for use in the app.js file.

I've looked at example code across the web however still not working. I suspect its to do with the webpack.config.js settings.

I have also tried using let person = require("./modules/Person"); but it does not work.

Please any ideas? They'll be much appreciated.

I've provide code excerpts below:

src/js/modules/person.js

class Person {

    constructor(name, jobtitle, sex){
        this.name = name;
        this.jobtitle = jobtitle;
        this.message = document.getElementById("message").html;
        this.sex = sex;
    }

    Greet(){
        console.log("Hello, my name is "+ this.name + " and i am a " + sex);
    }

    EchoOccupation(){
        console.log("I am a "+ this.jobtitle);
    }

    EchoMessage(){
        console.log("The message is "+ this.message);
    }
}

module.exports = Person;

src/js/app.js

import { Person } from './modules/person';

let vic = new Person("Fred", "Web Developer", "male");
vic.Greet();
vic.EchoOccupation("Web Developer");

webpack.config.js

var path = require("path"),
    watchBabel = require("watch-babel"),
    srcJsDir = "./src/js/",
    srcDestJsDir = "dist/assets/js/",
    options = { glob: "src/*.js" },
    watcher = watchBabel(srcJsDir, srcDestJsDir, options);

watcher.on("ready", function() { 
    console.log("ready"); 
}).on("success", function(filepath) {
    console.log("Transpiled ", filepath);
}).on("failure", function(filepath, e) {
    console.log("Failed to transpile", filepath, "(Error: ", e);
}).on("delete", function(filepath) {
    console.log("Deleted file", filepath);
});

module.exports = {

    entry: [srcJsDir + "/app.js"],
    output:  {
        path: srcDestJsDir,
        filename: "app.js"
    },
    watch: true,
    devServer: {
        inline: true,
        port: 8000
    },
    module: {
        loader : [
            { 
                test: /\.js$/,
                exclude: "/node_modules/",
                loaders: ['babel', 'watch-babel'],
                query: {
                    presets: ['es2015'],
                    plugins: ['babel-plugin-uglify']
                } 
            },
        ]
    },
    resolveLoader: {
        root: path.join(__dirname, 'node_modules/')
    }
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>im loving es6</title>
    <link href="/src/css/frameworks/bootstrap.min.css" />
</head>
<body> 
    <header></header>
    <main>
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <article>
                        <section> 
                            <div id="app"></div>
                            <div id="message">Hello this is my message!</div>
                        </section>
                        <aside></aside>
                    </article>
                </div>
            </div>
        </div>
    </main>
    <footer></footer>
    <script type="text/javascript" src="/dist/assets/js/app.js"></script>
</body>
</html>

For your immediate problem, it seems relatively clear that you want to write something like: var Person = require('./modules/person'); rather than using "import". That would be a reason for the syntax error. I can't help you with your Webpack config. Ah yes, you see, web browsers generally do not understand the new "import" syntax. — Cris P
– Cris P, Commented Sep 15, 2016 at 21:26
Thanks that worked!! Still do not get it... I would have thought Webpack would "transpile" or convert the "import" keyword like it does "let". Plus I attempted "let person = require("./modules/Person");" as well, probably at that point I was facing another error (a few I can see now after posting) but did not realise due to frustration. — vicgoyso
– vicgoyso, Commented Sep 15, 2016 at 21:42
Babel can indeed convert imports like that, but note that web browsers, e.g. recent Chrome, do understand other ES6 syntax such as "let". It looks to me like the errant script is running as-is. — Cris P
– Cris P, Commented Sep 15, 2016 at 21:51

gnerkus · Accepted Answer · 2016-09-16 01:11:11Z

4

The error occurs because the module exported from person.js does not have a Person property.

You can fix this by making three changes:

src/js/modules/person.js

class Person {
  ...
}

// Set the Person class as the object exported from this module
export default Person;

src/js/app.js

// Import the Person class
import Person from './modules/person';

webpack.config.js

...
module: {
  // Rename the 'loader' property to 'loaders'
  loaders: [
    ...
  ]
}

You'll find more information on import here: ES6 import

answered Sep 16, 2016 at 1:11

gnerkus

12.1k7 gold badges54 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vicgoyso Over a year ago

Chris P and gnerkus are both right, there were two critical errors in the webpack.config.js. Updating "loader:[ ]" to "loaders:[ ]" and removed "plugins: ['babel-plugin-uglify']" fixed the problem. Thanks guys, cant help but be embarrassed, looking back at the question, will get there, eventually.

Collectives™ on Stack Overflow

Webpack/Babel ES6 error: Uncaught SyntaxError: Unexpected token import

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related