Parcel: Parcel removes @babel/preset-env configuration

[wojtekmaj]

🐛 bug report

I noticed that despite configuring my .babelrc like so:

    ["@babel/preset-env", {
      "modules": false,
      "useBuiltIns": "usage",
      "corejs": 3
    }],

Object.entries does not have the polyfill added on usage.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "useBuiltIns": "usage",
      "corejs": 3
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-export-default-from"
  ],
  "env": {
    "test": {
      "presets": [
        ["@babel/preset-env", {
          "targets": {
            "node": "current"
          }
        }]
      ],
      "plugins": [
        "babel-plugin-styled-components"
      ]
    }
  }
}

🤔 Expected Behavior

useBulitIns and corejs options are not ignored.

😯 Current Behavior

useBulitIns and corejs options are ignored.

I investigated a lot in parcel-bundler source code and here's what I found.

In config.js, in getBabelConfig, I added a log:

  let envConfig = await getEnvConfig(asset, isSource);
  let jsxConfig = await getJSXConfig(asset, isSource);
  let flowConfig = getFlowConfig(asset, isSource);

  console.log('config.js - 1');
  console.log(babelrc.config.presets);

which resulted in console output:

config.js - 1
[
  [
    '@babel/preset-env',
    { modules: false, useBuiltIns: 'usage', corejs: 3 }
  ],
  '@babel/preset-react'
]

So far so good. At the end of getBabelConfig I added log again:

  console.log('config.js - 2');
  console.log(result[7].config.presets);

  return result;

and to my surprise, my preset was gone:

config.js - 2
[ '@babel/preset-react' ]

💁 Possible Solution

Commenting out these lines from config.js:

    if (Array.isArray(babelrc.config.presets)) {
      babelrc.config.presets = babelrc.config.presets.filter(preset => {
        return !ENV_PRESETS[getPluginName(preset)];
      });
    }

resulted in Babel receiving proper configuration & adding core-js polyfills to my file as desired.

If I understand source code correctly, these lines are there because we expect getEnvConfig to load @babel/preset-env in some special way. So my best guess is that getEnvConfig does something incorrectly, resulting in @babel/preset-env ignored.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | latest
| Node | 12.4.0
| npm/Yarn | Yarn 1.16.0
| Operating System | macOS Catalina

[wojtekmaj]

Oddly enough, repeating configuration in .babelrc in env.development does not strip presets out, and all my configuration is properly added:

  "env": {
    "development": {
      "presets": [
        ["@babel/preset-env", {
          "modules": false,
          "useBuiltIns": "usage",
          "corejs": 3
        }],
        "@babel/preset-react"
      ],
      "plugins": [
        "@babel/plugin-proposal-export-default-from"
      ]
    },
   "test": // ...

[r0skar]

To add: the same bug exists when configuring babel in package.json.

[Taaqif]

Noticing this issue as well. The workaround to use env.development seems hacky given we need to repeat the same configuration for both production and development.

Is there a better way of handling this while a fix is being developed?

[jak-hammond]

I am trying to get the presets and corejs to work on this as well, has any progress been made or do I still need to use the hack of development and production?

[arminrosu]

After a few hours going down the rabbit hole and not finding a solution, here are my findings, maybe someone else finds them useful.

getBabelConfig will get the .babelrc and then try to apply it's own @babel/preset-env. This is done via getEnvConfig which looks for your browserlist configuration, via getTargetedEngines and returns the default @babel/preset-env "plugins" for said list. In this process it sets useBuiltins: 'entry'.

Then removes all your env settings if it finds browserlist targets.

The discongruity of running parcel with NODE_ENV=development or not, seems to stem from the browserlist handling - in dev mode, it uses the defaults. I assume, but may be very wrong, that this affects the later preset & plugin filtering and somehow the results are closer to what you'd expect.

The code is a bit convoluted to me. I wished parcel would stop it's "magic" if it detects a .babelrc configuration and just use that with no extra parsing.

HTH

[mischnic]

I wished parcel would stop it's "magic" if it detects a .babelrc configuration and just use that with no extra parsing.

And now you know why we do exactly that in Parcel 2 😄

[arminrosu]

And now you know why we do exactly that in Parcel 2 😄

@mischnic awesome. I already know I can do more things with terser in parcel@2. Do you think it's safe to switch over? I'm not expecting 100% mature software in _beta1_, just "good enough to get stuff done".