erol_smsr erol_smsr - 1 year ago 143
HTML Question

Webpack getting started, import error

I'm getting started with Webpack, but already ran into the following problem: I created an app/index.js file (as specified in the documentation). I also created an index.html file (copied the HTML and CSS from the documentation). I ran the correct commands in the CLI (including generating a dist/bundle.js file).

The code:

<!DOCTYPE html>
<html lang="nl">
<meta charset="UTF-8">
<!-- <script src="" type="text/javascript"></script> -->
<script src="dist/bundle.js" type="text/javascript"></script>
<!-- Markup here -->
<div id="root"></div>

<!-- <script src="app/index.js" type="text/javascript"></script> -->

The JS:

// To bundle the lodash dependency with the index.js, we need to import lodash.
import _ from 'lodash';

function component () {
var element = document.createElement( 'div' );

/* lodash is required for the next line to work */
element.innerHTML = [ 'Hello, webpack' ], function( item ) {
return item + ' ';

return element;

document.body.appendChild( component() );

This returns the following console error:
bundle.js:48 Uncaught SyntaxError: Unexpected token import

How do I get this to run correctly?

Answer Source

As has been suggested, you'll need to setup up Babel to get this working.

Install babel dependancies:

    npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015

You'll need to edit your webpack.config.js file to include the babel loader settings:

var webpack = require('webpack');

module.exports = {
  module: {
    loaders: [
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download