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".

[ranisalt]

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

Not so simple. I'm trying to use

{
	"presets": [["@parcel/babel-preset-env", { "runtime": "automatic" }]],
	"plugins": ["@parcel/babel-plugin-transform-runtime"]
}

But it seems to ignore the { "runtime": "automatic" } part. Worse yet, I added throw new Error() to the top of the only file in @parcel/babel-preset-env and it just does not throw and that file is never used

Edit:

The offending code seems to be this:

Where mergeOptions is not deep, and overrides my options to @parcel/babel-preset-env with the default ones.

I don't know why this happens, the documentation clearly states that parcel uses .babelrc when it is available, but apparently it does not use it verbatim.

And it is clear that parcel is not reading the .babelrc file because, in my case, @parcel/babel-plugin-transform-runtime is not installed. It is an instant module not found error when running Babel manually.

By the way, --log-level verbose as of parcel@2.0.0-nightly.535 does nothing

[mischnic]

@ranisalt I think you actually want to pass runtime to preset-react though?

[ranisalt]

@mischnic I tried every combination I could think of. Right now I'm trying this:

{
        "presets": ["@parcel/babel-preset-env", ["@babel/preset-react", { "runtime": "automatic" }]],
        "plugins": [
                "@parcel/babel-plugin-transform-runtime",
                ["@babel/plugin-transform-react-jsx", {
                        "runtime": "automatic"
                }],
                "@babel/plugin-transform-typescript"
        ]
}

But it does not work still. It would be so helpful to know what are the defaults that Parcel uses, but I could not find it anywhere...

[mischnic]

This works correctly for me:

package.json

{
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@parcel/babel-preset-env": "^2.0.0-nightly.556",
    "parcel": "^2.0.0-nightly.554",
    "react": "^17.0.1"
  }
}

.babelrc:

{
	"presets": [
		"@parcel/babel-preset-env",
		["@babel/preset-react", { "runtime": "automatic" }]
	]
}

index.js:

function App() {
	return <div>1</div>;
}

console.log(App);

yarn parcel build index.js --no-minify

---

The default config is generated here:

parcel/packages/transformers/babel/src/config.js

Line 160 in 40f2417

async function buildDefaultBabelConfig(options: PluginOptions, config: Config) {

[ranisalt]

Try to put Typescript there:

import { FC } from 'react';

export const App: FC = () => {
	return <div>1</div>;
}

console.log(App);

[mischnic]

This babelrc works with an index.tsx file with your code:

{
	"presets": [
		"@parcel/babel-preset-env",
		"@babel/preset-typescript",
		["@babel/preset-react", { "runtime": "automatic" }]
	]
}

[ranisalt]

Oh, of course it will, you are never executing the JSX transform itself. I think using console.log(<App />); would break, but I am yet to take the time to test it.

[mischnic]

The jsx runtime is correctly bundled, if that's what you meant.

[ranisalt]

If you are using a monorepo, read the answer below. .babelrc will NOT work.

Thing is, I am using a monorepo, and this by itself is undocumented (where to put the files?). I tried adding an invalid .babelrc file to both the root and the package and neither has problems (it should crash), so parcel is not reading my .babelrc file at all, apparently:

{
	/* "presets": [ */
	/* 	"@parcel/babel-preset-env", */
	/* 	["@babel/preset-typescript", { isTSX: true }], */
	/* 	["@babel/preset-react", { "runtime": "automatic" }] */
	/* ] */
}

This just builds as usual.

[mischnic]

using a monorepo

.babelrcs inside a monorepo are ignored: https://babeljs.io/docs/en/config-files#monorepos

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.