Babel-loader: Set `modules: false` by default on babel-preset-env

[SpaceK33z]

I'm submitting a feature request

Webpack Version:
>= 2.x

Babel Loader Version:
7.1.2

Current behavior:

I need to manually disable the modules feature of Babel like this:

test: /\.js$/,
use: {
    loader: 'babel-loader',
    options: {
        presets: ['env', { modules: false }]
    }
}

To let webpack use its own ESM system.

Expected/desired behavior:

For webpack 2.x and higher, babel-loader can detect automatically that we don't want to use modules.

Sean said I had to mention loaderContext.version = 2 as a way to detect the new webpack version.

• What is the motivation / use case for changing the behavior?

Many people don't know this, and especially people who upgraded from webpack 1.x to >2.x often don't have this enabled (seen this a lot personally).

One problem with this is that it is a breaking change (or at least potentially), but at the long term I think it's worth it. One less configuration option for most people.

Open question: is there a valid use-case where you want to have modules on true in webpack 2?

cc'ing @hzoo and @TheLarkInn because I know you talked about this a few minutes ago with eachother 🥇

Related: #519

[SpaceK33z]

Another open questions: should we hardcode this for babel-preset-env? What if you use babel-preset-es2015 (or should we ignore it because you should use env)?Or is there another way to automatically set this?

[hzoo]

Also related is https://github.com/babel/babel-loader/pull/485 and #477 (issue)

Personally I'd rather just make it default, and even warn if they are using with webpack v1 to upgrade. No reason to not do it as long as there's a way out if you need to

Totally fine with making a major version bump

[SpaceK33z]

Cool! Perhaps I can find some time to make a PR in a few days, but if anyone has the time and interest feel free to do it.

[hzoo]

https://github.com/babel/babel-loader/pull/485/files does a lot of it already although it's hardcoded (and we are going to move to scoped packages so it should support @babel/preset-env too)

It's possible others may disagree. Also I would add the dynamic import syntax on by default too

[wellyshen]

I like this propose. I don't want to setup babel configurations respectively due to { modules: false }. (one in .babelrc another in webpack config)

[mikeaustin]

Would setting modules to false by default also make tree shaking work out of the box with webpack -p? I also agree with adding dynamic import. I spent hours trying to get dynamic importing to work, finding out later that I was using the wrong plugin (webpack's dynamic import vs Babel).

[abdulhannanali]

@mikeaustin Indeed it would!

[StephanBijzitter]

Thanks for creating this issue. My project also broke due to use strict that is added when modules is true. Apparently I can't use const on Node 8.10 with strict mode. Disabling modules helped for me.

[Igloczek]

What's the status of this issue?

I wasn't afraid of this option too, found this issue looking for a reason why three shaking in my Webpack 4 setup doesn't work when using import { debounce } from 'loadash-es' and turns out I just need to set modules to false and it works like a harm.

[hzoo]

If we wanted, we could just hardcode it in preset-env https://github.com/babel/babel-loader/pull/529 not that we have deprecated all the other presets (es2015, latest), and then figure out the generic solution later (same with dynamic import). Just need to check the webpack version.

[TheLarkInn]

I think hard coding it sounds great. How great is the desire to support webpack one users though.

Ideally that's the only compat challenge and I'd be personally fine with you making a webpack requirement to be v2+ for latest present version. But that would force a semver major?

[SpaceK33z]

@hzoo allright! I've created a new PR, #650 (I messed up #529 completely. git & me are having relationship issues at the moment). It hardcodes preset-env as you said (AFAIK there are three ways of using it, "env", "@babel/preset-env" and "babel-preset-env").

How great is the desire to support webpack one users though.

The code only kicks in on webpack > 1 and doing so is less than a line of code, so I think we can discuss supporting webpack 1 outside of this issue/PR 😄 (good point nonetheless).

[loganfsmyth]

This should be resolved with https://github.com/babel/babel-loader/pull/660

[webuniverseio]

Hi, I'm trying to understand what is happening with modules. Originally this ticket was created to make modules: false a default option. Documentation says by default it is 'auto', but doesn't explain what auto means. I see there is an open issue to clarify this in documentation.

From the link in open issue I see that https://github.com/babel/babel/pull/8485/files#r236086742 says

'auto' (default) which will automatically select 'false' if the current 
process is known to support ES module syntax, or "commonjs" otherwise

but I'm not sure what that means. Can someone please clarify this?

So my understanding is that currently default ('auto') option sets modules to false, but it is not too clear in which case it will not do that.

Please let me know if I'm missing something.
Thank you.

[webuniverseio]

@nicolo-ribaudo helped to answer that ❤️:

For example, if you are calling Babel using babel-loader, modules will be set to false because webpack supports ES modules

[ackvf]

https://babeljs.io/docs/en/babel-preset-env#modules

modules: "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, defaults to "auto"

I tried to set the option to "auto", but I have received this error:

Invalid Option: The 'modules' option must be either 'false' to indicate no modules, or a module type which can be be one of: 'commonjs' (default), 'amd', 'umd', 'systemjs'.

[nicolo-ribaudo]

Which version are you using?

[DFOXpro]

Update:
thanks to @nicolo-ribaudo here the solution is add more brackets:

presets: [["@babel/preset-env", { modules: false }]]

With
presets: ["@babel/preset-env", { modules: false }]
I get an even worst error:

Using removed Babel 5 option: .modules - Use the corresponding module transform pl
ugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules

In my case I just need this to be untouch

Versions:
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",

[nicolo-ribaudo]

Whats your full config?