Home Ask Login Register

Developers Planet

Your answer is one click away!

Tirithen February 2016

Webpack fails to build ES6 in external packages

I'm trying to use an ES6 npm package (in this case one called gamesystem) in a project and build with webpack (and babel) it fails to build any ES6 code inside the external dependency, why is that? If I have the same code as a dependency with a relative path it works fine.

App code:

'use strict';

import World from 'gamesystem'; // Breaks
//import World from '../node_modules/gamesystem'; // Also breaks
//import World from '../gamesystem'; // Works (copied the same directory gamesystem outside the node_modules directory)

let world = new World();

Error:

ERROR in ./~/gamesystem/World.js
Module parse failed: /home/user/project/node_modules/gamesystem/World.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
| 
| import System from './System';
| 
| export default class World {
 @ ./src/app.js 3:18-39

Webpack config:

'use strict';

// Modules
let WebpackNotifierPlugin = require('webpack-notifier');
let HtmlWebpackPlugin = require('html-webpack-plugin');

let config = {
  entry: {
    app: __dirname + '/../src/app.js'
  },
  devtool: 'source-map',
  devServer: {
    stats: {
      modules: false,
      cached: false,
      colors: true,
      chunk: false
    },
    proxy: require('./devProxy')
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'stage-0']
      }
    },
    {
      test: /\.css$/,
      loader: 'style!css'
    },
    {
      test: /\.html$/,
      loader: 'raw'
    }]
  },
  plugins: [
    new WebpackNotifierPlugin(),
    new HtmlWebpackPlugin({
      template: __dirname + '/../src/index.html',
      inject: 'body',
      minify: false
    })
  ]
};

module.exports = config;

Answers


Jon Surrell February 2016

You're explicitly excluding node_modules from babel-loader:

exclude: /node_modules/,

You'll need to tweak that if you want to pass modules from node_modules through babel. You might consider explicit includes like this:

// be sure to req path
// var path = require('path')

include: [
  // Include everything from your app path
  path.resolve(__dirname, 'my-app-js-path'),

  // Include gamesystem modules
  /\bgamesystem\b/,
],

Post Status

Asked in February 2016
Viewed 2,312 times
Voted 9
Answered 1 times

Search




Leave an answer


Quote of the day: live life