How to handle npm modules which include es6

[eoinmurray]

This is my babel-loader import in my webpack.config.js file

loaders: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel',
    query: {
      presets: ['react', 'es2015']
    }
  }
],

I try to run this to make minified code with webpack -p --config webpack.config.js

It works fine unless I have the module qs.js included, which uses the keyword let throughout.

The authors of qs.js recommend transpiling qs using babel ljharb/qs#141.
I achieved this in the compilation step by removing exclude: /node_modules/but I think thats messy as it babelify's every module included in my application.

Is there a more elegant way to do this, without needed to manage my own version of qs.js

[eoinmurray]

Any word on this?

[compiledpanda]

@eoinmurray you can exclude all node modules except qs using the following:

exclude: /node_modules\/(?!qs)/

This will let babel transpile qs without touching every other node module.

If you need to exclude more than one module you can extend the exception list like so:

exclude: /node_modules\/(?![module1|module2])/

Hope that helps :)

[eoinmurray]

This is great thanks, totally solves the issue!

[kyhy]

Above second regex didn't work me. Regex for including multiple modules, that worked for me, is:

exclude: /node_modules\/(?!(module1|module2)\/).*/

thanks @jonnymbgood for the right pointers though!

[tiendq]

@kyhy

/node_modules\/(?!(async\-es|lodash\-es)\/).*/ doesn't work for me.

/node_modules\/(?![async\-es|lodash\-es])/ works well.

[AndersDJohnson]

webpack/webpack#2031

[AndersDJohnson]

It looks like perhaps this has since been fixed in qs (see ljharb/qs#141 (comment)).

But for future reference, I've created a webpack helper to automatically detect dependencies such as this one that may require Babel transpilation. See https://github.com/andersdjohnson/webpack-babel-env-deps. It should work if a module specifies engines correctly in its package.json, or module which is a transpile-eligible entry a package can specify.

[raziza]

I've struggled with this also and this solutions, adding the exclude negative lookahead didn't solved my problem, but 50% of it. I had to add to the include as well.. For ex.

exclude: /node_modules\/(?!(event-class-es6))/,
include: path.join(__dirname, 'node_modules', 'event-class-es6'),