Webpack.js.org: bundle.js:47 Uncaught SyntaxError: Unexpected token import

Created on 27 Nov 2016 · 3Comments · Source: webpack/webpack.js.org

I'm following the steps in this tutorial: https://webpack.js.org/get-started/

Unfortunately when executing the following command:

webpack app/index.js dist/bundle.js

I have the following error in my Chrome browser:

 bundle.js:47 Uncaught SyntaxError: Unexpected token import

Here is my bundle.js file:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    import _ from 'lodash';

    function component() {
        var element = document.createElement('div');
        element.innerHTML = _.map(['Hello', 'webpack'], function(item){
            return item + ' ';
        });

        return element;
    }

    document.body.appendChild(component());


/***/ }
/******/ ]);

Source

MartinDelille

Most helpful comment

Thanks for your issue. This probably has to do with the Getting Started guide not pointing to the webpack v2 beta. There's an open issue for this: #367.

You can fix this by doing:

npm install [email protected] --save-dev

SpaceK33z on 27 Nov 2016

👍3

All 3 comments

Thanks for your issue. This probably has to do with the Getting Started guide not pointing to the webpack v2 beta. There's an open issue for this: #367.

You can fix this by doing:

npm install [email protected] --save-dev

SpaceK33z on 27 Nov 2016

👍3

It works indeed. Thanks for the quick answer!

MartinDelille on 27 Nov 2016

Hello, I am facing the same issue. Upon npm install [email protected] --save-dev, I get the following error:

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.
npm WARN [email protected] No repository field.
npm ERR! code 1

Can't really figure out what's going on. What could be the issue?