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

webpack babel-loader config is not transpiling npm modules. #826

Closed
johnwebbcole opened this Issue Jul 27, 2017 · 7 comments

Comments

Projects
None yet
4 participants
@johnwebbcole

johnwebbcole commented Jul 27, 2017

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.

image

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.

image
pretty-bytes is still using arrow-functions.

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

@KagamiChan

This comment has been minimized.

Contributor

KagamiChan commented Jul 28, 2017

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

This comment has been minimized.

Contributor

LinusBorg commented Jul 28, 2017

kagamiChan is right.

@LinusBorg LinusBorg closed this Jul 28, 2017

@johnwebbcole

This comment has been minimized.

johnwebbcole commented Jul 28, 2017

@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 sindresorhus/ama#446 or facebook/create-react-app#1125 (comment)

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

This comment has been minimized.

Contributor

LinusBorg commented Jul 28, 2017

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

This comment has been minimized.

Contributor

KagamiChan commented Jul 28, 2017

@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

This comment has been minimized.

johnwebbcole commented Jul 28, 2017

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

This comment has been minimized.

gowthambalashanmugam commented Nov 15, 2018

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

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