Skip to content
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 · 20 comments
Closed

How to handle npm modules which include es6 #171

eoinmurray opened this issue Dec 1, 2015 · 20 comments

Comments

@eoinmurray
Copy link

@eoinmurray 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
Copy link
Author

@eoinmurray eoinmurray commented Dec 7, 2015

Any word on this?

@compiledpanda
Copy link

@compiledpanda compiledpanda 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
Copy link
Author

@eoinmurray 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
Copy link

@kyhy 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
Copy link

@tiendq 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
Copy link

@AndersDJohnson AndersDJohnson commented Jul 22, 2017

@AndersDJohnson
Copy link

@AndersDJohnson 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
Copy link

@raziza 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
Copy link

@sibelius 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

@hannadrehman
Copy link

@hannadrehman 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.

@obahareth
Copy link

@obahareth obahareth commented Feb 2, 2019

I built a package called are-you-es5 that checks which of your dependencies aren't ES5 and builds the exclude regex you need for your specific set of packages, based on @jonnymbgood's solution. I could really use some testers/contributors for the package to run it in different projects and make sure it behaves well in all cases.

carbon

@janoist1
Copy link

@janoist1 janoist1 commented Feb 3, 2019

For your information, there's a plugin that may help simplifying things: next-plugin-transpile-modules

@fvonellerts
Copy link

@fvonellerts fvonellerts commented Feb 18, 2019

You could use an array for the dependencies, it's a little nicer to edit this way. And you don't have to escape module names.

const transpileDependencies = [
    'module1',
    'module2'
]

loaders: [
    {
        exclude: new RegExp(`node_modules/(?!(${transpileDependencies.join('|')})/).*`)
    }
]
@ratbeard
Copy link

@ratbeard ratbeard commented Apr 24, 2019

I know I've compiled node_modules in the past using something like the above methods that use exclude. They weren't working for me this time, as of babel 7 which seems to ignore node_modules automatically

This worked:

import { resolve } from 'path';

// ...

  {
    test: /\.(js|jsx|ts|tsx)$/,
    include: [
      resolve('src'),
      // These dependencies have es6 syntax which ie11 doesn't like.
      resolve('node_modules/@rehooks/component-size'),
      resolve('node_modules/react-spring'),
    ],
    use: ['babel-loader'],
  },
@jpweeks
Copy link

@jpweeks jpweeks commented May 22, 2019

If anyone's still confused by changes in Babel 7 (I was), you have to switch to using babel.config.js in order to affect modules in node_modules:
https://babeljs.io/docs/en/configuration#babelconfigjs

@seasolzombie
Copy link

@seasolzombie seasolzombie commented Dec 27, 2019

@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 :)

works!!!!!!!!!!

@wilsonsilva
Copy link

@wilsonsilva wilsonsilva commented Mar 4, 2020

If you're experiencing this issue with Next.js, use next-transpile-modules! My setup was a Dockerized Next.js app and a local npm module that wasn't being transpilled.

@velidan
Copy link

@velidan velidan commented Apr 24, 2020

What if the package that should be transpiled contains its own node_modules package that should be transpiled as well? How it can be handled?
Thanks

Project (Babel/Webpack/Typescript)

  • node_modules
    • dependencyA (ES6)
      • node_modules
        • nested_dependency (ES6)
@olarsson
Copy link

@olarsson olarsson commented Nov 26, 2020

worth mentioning is that (for me at least) the build time was much quicker, especially in watch mode with webpack when using only include and not even bothering with exclude. node_modules seems to be ignored by default, and simply explicitly including what you need to be transpiled instead appears to be faster:

const path = require('path');

include: [
  path.resolve(__dirname + '/assets/src/js'), // your default js source
    ...['module-to-be-transpiled', 'another-module-to-be-transpiled'].map((moduleName) => (
      path.resolve(__dirname + '/node_modules/' + moduleName)
    ))
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet