Webpack getting started, import error

Question

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">
    <head>
        <meta charset="UTF-8">
        <title>Webpack</title>
        <!-- <script src="https://unpkg.com/[email protected]" type="text/javascript"></script> -->
        <script src="dist/bundle.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- Markup here -->
        <div id="root"></div>

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

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 = _.map( [ '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?

You can find a tutorial on Webpack and Babel here: data-blogger.com/2017/04/07/… — www.data-blogger.com
– www.data-blogger.com, Commented Apr 7, 2017 at 8:27

Pineda · Accepted Answer · 2016-11-24 00:26:41Z

5

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']
        }
      }
    ]
  },
};

answered Nov 24, 2016 at 0:26

Pineda

7,5933 gold badges34 silver badges47 bronze badges

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

5 Comments

erol_smsr Over a year ago

Thanks for your answer. But where can I find the webpack.config.js file? I looked in the node_modules/webpack folder, but couldn't find it there.

Pineda Over a year ago

You define it yourself directly in the root of your directory structure. That's the same folder level as node_modules but not inside it

erol_smsr Over a year ago

Oh I just did that. Doesn't change anything.

Pineda Over a year ago

Are your component files saved as .js or .jsx? If your files are saved as only .js you can amend the line 'test' to>>> test: /\.js$/,

erol_smsr Over a year ago

Now I get the npm ERR! code LIFECYCLE error. It is said on other questions that this is due to a syntax error in a sass or JS file. But I copied the JS and everything else from Webpacks own getting started guide. Kind of annoying I run into all these errors and stuff, just for dependency management :/

Collectives™ on Stack Overflow

Webpack getting started, import error

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related