Using native ECMAScript modules in Babeljs config

Question

I'm very, very confused about using babel config with native ECMAScript modules, and "type": "module" set in package.json. As far as I understand Babel docs (here, under "Supported file extensions"), its should be possible. But if I try with config like this:

const config = () => {
  const presets = [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        bugfixes: true,
        useBuiltIns: "usage",
        corejs: { version: "3.6", proposals: true },
      },
    ],
  ];
  const plugins = ["@babel/plugin-transform-runtime"];
  return { presets, plugins };
};
export default config;

I get Error while loading config - You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.

This is expected as the said docs states that "native ECMAScript modules are asynchronous". Alas, sprinkling the above config with async / await doesn't solve the problem. I'm running babel through parcel - is this a issue with parcel? Did I misunderstood the docs? I really appreciate if someone could clarify it for me.

Answer 1

I had a similar problem, and reading Babel site, I came to conclusion that whatever is using your babel config is not calling it asynchronously. In my case it was jest 26.
I got around the problem by changing the config to a json file - babel.config.json. Other people have changed their config file to a commonjs file - babel.config.cjs, then you will need to change your config file to be commonjs, i.e. to use module.exports = {rest of your config}