[4.0.0.rc.1 / 4.0.0.rc.2] Doesn't allow non-transpiled JS.

[tylercrocker]

I have a number of apps that are either for personal use or are behind a login wall and my company can enforce modern browser usage, so I prefer to not bother with Babel transpiling my code for these apps. This has worked fine up to 4.0.0-pre.3 by just not including the babel line at the top and telling the loader to exclude everything (or just deleting the loader entirely I think works as well). With a new project I'm working on I ended up getting rc.2 and suddenly it appears that javascript ALWAYS gets transpiled for some reason, regardless of what I do.

Is there some setting I missed that I can use to tell Babel to leave my code alone? I noticed the new extract_css setting, but I'm not seeing anything similar for the transpiling stuff.

Thanks!

[gauravtiwari]

@tylercrocker Yes, to comply with ES5 standard and support all evergreen browsers, we now transpile all modules even from node_modules.

// environment.js

environment.loaders.delete('nodeModules')

I guess you can delete node_modules loader: https://github.com/rails/webpacker/blob/master/package/rules/node_modules.js && https://github.com/rails/webpacker/blob/master/package/rules/index.js

[gauravtiwari]

Or perhaps we can have that as a config option.

[tylercrocker]

@gauravtiwari OK, so I'd have to delete the nodeModules loader as well as the babel loader? I'll try this as soon as I've got some time... or does removing the nodeModules loader break anything else...?

[tylercrocker]

OK, I tested adding

delete environment.loaders.babel;
delete environment.loaders.nodeModules;

To my environment.js file, got excited cause it seemed to work, then I realized that I was still on pre.3 :(

So I'm still stuck at square one...

[gauravtiwari]

Could you use this api please?

// environment.js

environment.loaders.delete('nodeModules')
environment.loaders.delete('babel') // you would need it though, don't delete this

[tylercrocker]

Ohhhhh! Ok, yes, that worked! Thank you :)

So to confirm for anyone coming across this... What I had to do was add this line to environment.js:

environment.loaders.delete('nodeModules');

Though then if you need anything transpiled in node_modules you will probably need to do what I've been doing for older versions with babel, which was overriding babel's exclude, via:

const babelLoader = environment.loaders.get('babel');
babelLoader.exclude = /(node_modules\/babel.*|.*\.scss$)/;

(I dunno that I need to do that REGEXP exactly... I want to say at some point I had issues with SASS files and I didn't want it to try to transpile itself. I've been using that REGEXP with Webpacker for like a year now though.)

It DOES seem like this solution is a little bit wonky... If you want to be able to have multiple pack files (one that is transpiled and one that is not) then you have to do what I'm doing here (then calling import '@babel/polyfill'; in your transpiled pack(s)). Is there not a better way to handle from a "default" level?

Honestly, just changing the babel loader's default exclude property to transpile node_modules by default, rather than excluding it then re-including it the way it's being done now?

[lucaong]

I agree this is a bit tricky and would probably need documentation, and maybe a global configuration option to control what is excluded from the babel-loader.

The thing is that it is a quite common need to exclude the whole node_modules (or a specific library in it) from the babel-loader, and at the moment it is quite tricky. At first glance, it looks like the node_modules folder is already excluded:

console.log(environment.loaders.get('babel').exclude) // => /node_modules/

But instead it is loaded by environment.loaders.get('nodeModules').

As a practical example, the popular localForage library breaks when transformed by the babel-loader and then minified by Terser, causing it to break in the production environment. That is of course a problem that should be better addressed in the library itself, or in babel-loader, or in Terser, but the easy solution is excluding it from Babel. At the moment, finding how to do that is quite hard (unless one stumbles upon the current issue, that is 🙂 )