Webpack ES6 import issue

For anyone else who is writing ES6 code and using Webpack, and getting unexpected token on import line.

There is a issue with babel-loader and using the import statement. You need the es2015 presets in webpack.config.js:

module: { loaders: [ { test: /.js$/, exclude: /node_modules/, loader: ‘babel?presets[]=es2015’ } ]}

reference: https://github.com/babel/babel-loader/issues/123

This is only if you’re using Babel 6. When installing Webpack + Babel for the first time, npm is going to fetch Babel 6 unless otherwise specificed.

Babel 6 is breaks compatibility with plugins so if you’re using many plugins at this point in time, you will want to wait on upgrading to Babel 6. Last I checked, Webpack and many Webpack plugins were not tested with Babel 5.

This is also probably why something like this fix isn’t widely documented yet.

1 Like

I got my webpack config to work with Babel 6 with this setup:

  module: {
    loaders: [
      {
        test: /\.js$/, 
        loader: 'babel-loader', 
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'node_modules', 'prosemirror')
        ],
        // Need this here for prosemirror til it has own .babelrc
        query: {
          presets: ['es2015']
        }
      },
      ...

Edit: noticed that I’m doing the same thing as the OP, using query, but I’m also specifically including node_modules/prosemirror since I’m using it as a dependency.

Hi, i am setting up webpack with babel for the first time. But not able to resolve “unexpected token import” issue. Please suggest:

babelrc file:

{
    "presets": ["es2015"]
}

webpack.config.js

module.exports = {
    entry: './app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js'
    },
    module: {
        loader: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                  presets: ['es2015']
                }
            }
        ]
    }
};

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "sample",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "pranav",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.9.1"
  }
}

How are you importing prosemirror? Make sure you import using the es5 dist path.

const {ProseMirror} = require("prosemirror/dist/edit")

Otherwise (to use es6 src) you’ll need to whitelist it in your babel loader as I showed earlier in the thread. I’ve since switched to dist.

Hi,I alse met this case,do you know how to resolve it?