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;

I asked on stackoverflow as well: https://stackoverflow.com/questions/35273956/webpack-fails-to-build-es6-in-external-packages

Author: Fantashit

4 thoughts on “Webpack fails to build ES6 in external packages

  1. My fault, I was excluding the node_modules directory in the webpack config, thanks for a great software, but lets hope that we soon can peal off more and more of the layers of tools needed to run ES2015+

  2. Oh, actually the source of the error is right here…

    exclude: /node_modules/
    

    Exclude has preceedence over include as far as I know. So maybe you want to use an array of paths to include instead? It’s the preferred way.

    include: [
        /node_modules\/(gameworkd|someOtherModule|...)/,
        path.join(__dirname, "./app") // assuming that your config and app are in the same folder.
    ]
    

    Am 08.02.2016 um 19:16 schrieb Fredrik Söderström notifications@github.com:

    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;
    I asked on stackoverflow as well: https://stackoverflow.com/questions/35273956/webpack-fails-to-build-es6-in-external-packages https://stackoverflow.com/questions/35273956/webpack-fails-to-build-es6-in-external-packages

    Reply to this email directly or view it on GitHub #2017.

  3. Even by putting my module in the include I get the same error.

    {
      test: /\.(js|jsx)$/,
      include: [
         path.resolve(__dirname, './app'),
         /node_modules\/(c360-structured-tree-component)/
      ],
      loaders: [
        require.resolve('react-hot-loader'),
        require.resolve('babel-loader')
     ]
    },
    

    Here is the error.

    /Users/rparent/Documents/CTSProjects/arsenal/cms/node_modules/c360-structured-tree-component/src/component/TreeContainer.js:3
    import { connectToStores } from 'fluxible-addons-react'
    ^^^^^^
    
    SyntaxError: Unexpected reserved word
        at exports.runInThisContext (vm.js:53:16)
        at Module._compile (module.js:414:25)
        at Module._extensions..js (module.js:442:10)
        at Object.require.extensions.(anonymous function) [as .js] (/Users/rparent/Documents/CTSProjects/arsenal/cms/node_modules/babel-register/lib/node.js:134:7)
        at Module.load (module.js:356:32)
        at Function.Module._load (module.js:313:12)
        at Module.require (module.js:366:17)
        at require (module.js:385:17)
        at Object.<anonymous> (AssetsPage.js:5:1)
        at Module._compile (module.js:435:26)
    

    Any clue on this, other solutions or something I might have done wrong?

  4. Hi @raphaelparent, @ThariqS
    I’m having a similar problem.

    I have two node_module packages that are written in ES6. One of them imports the other.

    I’m trying to figure out how to have webpack transpile the files. I’ve added the directory for each to the include: [] array in the webpack config, but I still get SyntaxError: Unexpected token export:

    export function loadScript(src, cb) {
    ^^^^^^
    SyntaxError: Unexpected token export
        at Object.exports.runInThisContext (vm.js:76:16)
        at Module._compile (module.js:542:28)
        at Object.Module._extensions..js (module.js:579:10)
        at Module.load (module.js:487:32)
        at tryModuleLoad (module.js:446:12)
        at Function.Module._load (module.js:438:3)
        at Module.require (module.js:497:17)
        at require (internal/module.js:20:19)
    

    any ideas?

Comments are closed.