webpack babel-loader config is not transpiling npm modules.

[johnwebbcole]

I'm trying to get the babel-loader plugin to compile npm installed modules. Here is a simple example of my issue. https://github.com/johnwebbcole/vue-webpack-bable-issue

This is a fresh vue init webpack testwp and adding pretty-bytes which is written in ES6.

In order to run on IE 11 I need to transpile the node_modules/pretty-bytes/index.js file. The default config does not appear to do this.

My research indicates that the babel-loader plugin should be handling this, but different configurations to webpack.base.conf.js and .babelrc file have failed to fix the issue. Many issues seem to be with all of the node_modules files getting transpiled and it needing to be in the excludes list. Doing the opposite, adding it to the include array did not fix the issue.

pretty-bytes is still using arrow-functions.

Does anyone have some suggestions to get the node_modules files to be transpiled. Thanks!

[KagamiChan]

IMO published packages are assumed to be transpiled, for your case you may add this package in you babel-loader's config here https://github.com/johnwebbcole/vue-webpack-bable-issue/blob/master/build/webpack.base.conf.js#L47

[LinusBorg]

kagamiChan is right.

[johnwebbcole]

@KagamiChan I understand that has been typical in the past, but it appears that some module maintainers are deciding to leave that up to the bundler. See https://github.com/sindresorhus/ama/issues/446 or https://github.com/facebookincubator/create-react-app/issues/1125#issuecomment-264217076

Apparently this can no longer be assumed.

Also, as stated in the issue, adding a node_module to the include array does not fix the issue. If you believe this is a webpack bug, I'll open a ticket there, but I was hoping this was a configuration issue. Since it appears that none of the node_module files are being transpiled by babel-loader without anything in the excludes: [] section, I was wondering if there was a configuration somewhere removing all of the node_module entries, even if they are in include.

[LinusBorg]

Without any exlcude: [] and includes[](!), babel, loader should transform everything coming from your node_modules directory. That would make your ptranspilation process veeeeeeeeery slow though:

https://github.com/babel/babel-loader#babel-loader-is-slow

So, since babel / babel-loader doesn't have a mechanism like the one proposed by sindresorhus in the comment you linked to, you will have to add a seperate include path for every package in node_modules that needs transpiling.

[KagamiChan]

@johnwebbcole This assumption is not a rule, but if you want your code work out of box on major platforms and benefit from bleeding edge ES at the same time, a transpilation seems necessary. Anyway I agree that things could totally change sometime.

As per your issue, you may try appending lib's path in include option, use a custom node module resolve function or simply require.resolve

include: [resolve('src'), resolve('test'), require.resolve('pretty-bytes')]

As I don't have IE 11 nor any legacy browsers at hand, I don't know if this eventually works for you, but the arrow function seems disappeared

[johnwebbcole]

Thanks for everyone's help, I was able to get this example working. I've updated the example site with my fixes.

I had to remove the transform-runtime babel plugin. Apparently it has known issues when compiling additional modules.

IE 11 also needed babel-polyfill.

I really appreciate all the help. Thank you.

[gowthambalashanmugam]

Is there any idea that how can i achieve the same in angular 6? I have some node modules developed on es6. so after build the npm modules will be part of vendor.js (w/o transpile) so throws error in IE

[aprilmintacpineda]

Without any exlcude: [] and includes[](!), babel, loader should transform everything coming from your node_modules directory. That would make your ptranspilation process veeeeeeeeery slow though:

https://github.com/babel/babel-loader#babel-loader-is-slow

So, since babel / babel-loader doesn't have a mechanism like the one proposed by sindresorhus in the comment you linked to, you will have to add a seperate include path for every package in node_modules that needs transpiling.

I don't have any include or exclude on my test rules. I'm using latest babel-loader and latest webpack (all latest stuff). My test is only for a particular module:

test: path.join(__dirname, '../node_modules/fluxible-js')

I can say that webpack honors the rules because only babel-loader is the one that's not doing it's job, the rest of the loaders defined on the same rule are all working so on WEBPACK's side, it's loaded, but babel-loader is not compiling it.

https://github.com/babel/babel-loader/issues/171
https://github.com/babel/babel-loader/issues/741