Can't use es6 modules with webpack

Question

I get error when trying to use es6 modules with babel loader in webpack. It works fine with require, but not with import.

if I do:

foo = require( './app/data.js'); //it works

but

import foo from './app/data.js'; //gives me a syntax error:

: Module parse failed Line 1: Unexpected token You may need an appropriate loader to handle this file type.

loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'src'),
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },

paths:

webpackconfig /app/main.js

"devDependencies": {
    "babel-core": "^6.1.20",
    "autoprefixer-loader": "^3.1.0",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.1.2",
    "css-loader": "^0.23.0",
    "less": "^2.5.1",
    "less-loader": "^2.2.0",
    "node-libs-browser": "^0.5.2",
    "style-loader": "^0.13.0",
    "webpack": "^1.10.0",
    "webpack-dev-server": "^1.10.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.1.19"
  }

Please read tag descriptions. babel is for questions for a Python library with said name. — Felix Kling

dreyescat dreyescat · Accepted Answer · 2015-11-14T15:45:17

It looks like babel is not taken part on the party. Things to check regarding the file containing the import foo from 'data'; statement:

Check that the file is under the src directory.
Check that the file extension is .js.

As a side note... the ES6 equivalent to:

foo = require( './data');

would be,

import foo from './data';
                 ^^

Can't use es6 modules with webpack

1 Answers