New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to handle npm modules which include es6 #171

Closed
eoinmurray opened this Issue Dec 1, 2015 · 11 comments

Comments

Projects
None yet
9 participants
@eoinmurray
Copy link

eoinmurray commented Dec 1, 2015

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

This comment has been minimized.

Copy link

eoinmurray commented Dec 7, 2015

Any word on this?

@jonnymbgood

This comment has been minimized.

Copy link

jonnymbgood commented Dec 9, 2015

@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 comment has been minimized.

Copy link

eoinmurray commented Dec 14, 2015

This is great thanks, totally solves the issue!

@eoinmurray eoinmurray closed this Dec 14, 2015

ikido added a commit to wearevolt/mobx-model that referenced this issue Jan 19, 2016

@kyhy

This comment has been minimized.

Copy link

kyhy commented Oct 10, 2016

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

This comment has been minimized.

Copy link

tiendq commented Jan 18, 2017

@kyhy

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

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

@AndersDJohnson

This comment has been minimized.

Copy link

AndersDJohnson commented Jul 22, 2017

@AndersDJohnson

This comment has been minimized.

Copy link

AndersDJohnson commented Jul 26, 2017

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

This comment has been minimized.

Copy link

raziza commented Aug 15, 2017

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'),
@sibelius

This comment has been minimized.

Copy link

sibelius commented May 29, 2018

we should use exclude and include to make this work

not sure if this is a feature or a bug

@Venryx

This comment has been minimized.

Copy link

Venryx commented Dec 12, 2018

It's odd that the two posters above only got it working when they added both the exclude and include entries. For me it works with just the include line. (though, in my case I had to add a fs.realpathSync call, since I had my node-module symlinked)

{
	test: /\.(jsx?|tsx?)$/,
	// we have babel ignore most node_modules, but we tell it to transpile the scripts within MY_MODULE
	include: [
		path.resolve(rootPath, "src"),
		fs.realpathSync(path.resolve(rootPath, "node_modules", "MY_MODULE"))
	],
	loader: "babel-loader",
	options: [...]
},
@hannadrehman

This comment has been minimized.

Copy link

hannadrehman commented Dec 23, 2018

same problem but different use case. i am using lerna to create packages for different modules. so my packages have this kind of pattern node_modules/@packages/ui-components
i tried to both include and exclude but it doesn't work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment