Support for ESM style Babel config files, calling Babel in async fixed?

[kroko]

I'm submitting a bug report

Node.js version:
14.16.0

Webpack Version:
5.24.3

Babel Core Version:
7.13.8

Babel Loader Version:
8.2.2

Please tell us about your environment:
macOS 10.15.7

Current behavior:
I was using CJS for all _build config related source_, currently I am changing everything to ESM.
I am not changing package.json to "type": "module" though, simply renaming all files to .mjs and changing the syntax.
So far so good (all webpack configs, helper scripts migrated, everything works).

Now, when renaming .babelrc.js to .babelrc.mjs and changing syntax, webpack throws well defined error.

Parsing error: /path/to/.babelrc.mjs: Error while loading config - You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously

Here are contents as a reference

.babelrc.js

// module.exports = { // uncomment for CJS

export default { // uncomment for MJS

  "presets": [
    [
      "@babel/preset-env",
      {
        // https://babeljs.io/docs/en/babel-preset-env.html#modules
        "modules": false,
        // https://babeljs.io/docs/en/babel-preset-env.html#usebuiltins
        "useBuiltIns": "usage",
        // https://babeljs.io/docs/en/babel-preset-env.html#corejs
        // https://github.com/zloirock/core-js#babelpreset-env
        "corejs": '3.8',
        // https://babeljs.io/docs/en/babel-preset-env.html#forcealltransforms
        "forceAllTransforms": false,
        // https://babeljs.io/docs/en/babel-preset-env.html#ignorebrowserslistconfig
        "ignoreBrowserslistConfig": false,
        // https://babeljs.io/docs/en/babel-preset-env.html#debug
        "debug": true
      }
    ],
    [
      "@babel/preset-react",
      {
        development: process.env.BABEL_ENV === "development"
      }
    ]
  ],
  "plugins": process.env.BABEL_ENV === "development"
    ? [
        "react-refresh/babel",
        "@babel/plugin-syntax-jsx"
      ]
    : [
        "@babel/plugin-syntax-jsx"
      ]
};

and JS related module section in webpack config

// ...

    {
      test: /\.(js|mjs|ts)x?$/,
      exclude: [/node_modules/, /bower_components/, /preflight\.js$/],
      use: [
        {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            cacheCompression: false
          }
        }
      ]
    },

// ...

Expected/desired behavior:

Babel documentation about Supported file extensions say that ECMAScript modules are supported

babel.config.mjs and .babelrc.mjs use native ECMAScript modules. They are supported by Node.js 13.2+ (or older versions via the --experimental-modules flag). Please remember that native ECMAScript modules are asynchronous (that's why import() always returns a promise!): for this reason, .mjs config files will throw when calling Babel synchronously. They have been supported since v7.8.0.

Now, it nicely mentions why the error happens.

Expected that babel-loader supports ESM moving forward.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.

See above - just change any existing project babel.config.js or .babelrc.js to use .mjs and fix syntax. Probably change webpack config .mjs and change syntax too.

What is the expected behavior?

It should work. At some point 😄 , as ESM is way to go.

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

ESM everything.
Sure, there are few config files within build config where ESM is still not possible yet, such as .eslintrc.js that explicitly states that ESLint does not support ESM configuration at this time. But Babel explicitly states it can.

I see this pull #825 , but...

Thanks!

[JLHwung]

I can not reproduce this issue locally, can you share a reproduction repo?

[nicolo-ribaudo]

Also make sure you are not accidentally using an old Babel or babel-loader version, run yarn dedupe (Yarn 2) / npx yarn-deduplicate (Yarn 1) / npm dedupe (Npm)

[UsamaHameed]

I hate to hijack this issue because my situation seems the opposite but the error is the same.

I have a babel config written as an ESM and I see the following error:

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: path/to/babel.config.js: Error while loading config - You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.
    at loadCjsOrMjsDefault (path/to/node_modules/@babel/core/lib/config/files/module-types.js:59:13)
    at loadCjsOrMjsDefault.next (<anonymous>)
    at readConfigJS (path/to/node_modules/@babel/core/lib/config/files/configuration.js:200:47)
    at readConfigJS.next (<anonymous>)
    at Function.<anonymous> (path/to/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
    at Generator.next (<anonymous>)
    at evaluateSync (path/to/gensync/index.js:251:28)
    at Function.sync (path/to/node_modules/gensync/index.js:89:14)
    at sync (path/to/node_modules/@babel/core/lib/gensync-utils/async.js:66:25)
    at sync (path/to/node_modules/gensync/index.js:182:19)

When I rename my babel.config.js file to babel.config.cjs and make it CJS as well, it works but not with ESM. Is my configuration missing something to make ESM work?

babel.config.js

export default {
  presets: [
    ['@babel/preset-env', {
      modules: false,
      targets: { browsers: ['last 2 versions', 'safari >= 7'] },
    },
    ],
    '@babel/preset-react',
  ],
  plugins: [
    'syntax-trailing-function-commas',
    'import-glob',
    ['@babel/plugin-transform-runtime', {
      regenerator: true,
    }],
    'transform-class-properties',
    'react-hot-loader/babel',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator',
  ],
  env: {
    test: {
      presets: [
        '@babel/preset-env',
        '@babel/preset-react',
      ],
      plugins: [
        // '@babel/plugin-transform-modules-commonjs',
        ['@babel/plugin-transform-runtime', {
          regenerator: true,
        }],
        'transform-class-properties',
      ],
    },
  },
};

[nicolo-ribaudo]

It seems to be the same problem.
Could you edit path/to/node_modules/@babel/core/lib/config/files/module-types.js, add Error.stackTraceLimit = Infinity at the beginning of that file, and post the longer stack trace that it will print?

[UsamaHameed]

Here you go:

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: /path/to/babel.config.js: Error while loading config - You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.
    at loadCjsOrMjsDefault (/path/to/node_modules/@babel/core/lib/config/files/module-types.js:60:13)
    at loadCjsOrMjsDefault.next (<anonymous>)
    at readConfigJS (/path/to/node_modules/@babel/core/lib/config/files/configuration.js:200:47)
    at readConfigJS.next (<anonymous>)
    at Function.<anonymous> (/path/to/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
    at Generator.next (<anonymous>)
    at evaluateSync (/path/to/node_modules/gensync/index.js:251:28)
    at Function.sync (/path/to/node_modules/gensync/index.js:89:14)
    at sync (/path/to/node_modules/@babel/core/lib/gensync-utils/async.js:66:25)
    at sync (/path/to/node_modules/gensync/index.js:182:19)
    at onFirstPause (/path/to/node_modules/gensync/index.js:210:24)
    at Generator.next (<anonymous>)
    at cachedFunction (/path/to/node_modules/@babel/core/lib/config/caching.js:68:46)
    at cachedFunction.next (<anonymous>)
    at evaluateSync (/path/to/node_modules/gensync/index.js:251:28)
    at /path/to/node_modules/gensync/index.js:31:34
    at Array.map (<anonymous>)
    at Function.sync (/path/to/node_modules/gensync/index.js:31:22)
    at Function.all (/path/to/node_modules/gensync/index.js:210:24)
    at Generator.next (<anonymous>)
    at loadOneConfig (/path/to/node_modules/@babel/core/lib/config/files/configuration.js:131:45)
    at loadOneConfig.next (<anonymous>)
    at buildRootChain (/path/to/node_modules/@babel/core/lib/config/config-chain.js:84:51)
    at buildRootChain.next (<anonymous>)
    at loadPrivatePartialConfig (/path/to/node_modules/@babel/core/lib/config/partial.js:103:62)
    at loadPrivatePartialConfig.next (<anonymous>)
    at Function.<anonymous> (/path/to/node_modules/@babel/core/lib/config/partial.js:148:25)
    at Generator.next (<anonymous>)
    at evaluateSync (/path/to/node_modules/gensync/index.js:251:28)
    at Function.sync (/path/to/node_modules/gensync/index.js:89:14)
    at Object.<anonymous> (/path/to/node_modules/@babel/core/lib/config/index.js:47:61)
    at Object.<anonymous> (/path/to/node_modules/babel-loader/lib/index.js:151:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/path/to/node_modules/babel-loader/lib/index.js:3:103)
    at _next (/path/to/node_modules/babel-loader/lib/index.js:5:194)
    at /path/to/node_modules/babel-loader/lib/index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (/path/to/node_modules/babel-loader/lib/index.js:5:97)
    at Object._loader (/path/to/node_modules/babel-loader/lib/index.js:231:18)
    at Object.loader (/path/to/node_modules/babel-loader/lib/index.js:64:18)
    at Object.<anonymous> (/path/to/node_modules/babel-loader/lib/index.js:59:12)

Thanks for your help 👍

[JLHwung]

We should use transformAsync and fallback to the promisified version:

babel-loader/src/transform.js

Line 5 in 1669ac0

const transform = promisify(babel.transform);

[nicolo-ribaudo]

@JLHwung babel.transform uses a callback, so it should still work asynchronously anyway 🤔

[kroko]

I can not reproduce this issue locally, can you share a reproduction repo?

Here you go https://github.com/kroko/bugrepro-babel-loader-esm-01

[nicolo-ribaudo]

@kroko Thanks for the reproduction, I found two problems:

1. You are using the ESLint webpack plugin and @babel/eslint-parser. ESLint doesn't support async parsers, so Babel throws when it needs to load a .mjs file.
2. Even if I disable the ESLint plugin, I still get this error (with Node.js 15):

   Module build failed (from ./node_modules/babel-loader/lib/index.js):
   TypeError: /home/nicolo/Documenti/dev/babel-bugs/bugrepro-babel-loader-esm-01/app-renderer/.babelrc.mjs: Error while loading config - Invalid host defined options
   

   Unfortunately this error is completely unuseful, but if I switch to Node.js 14 I get

   TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.
     at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:34:9)
     at import_ (/home/nicolo/Documenti/dev/babel-bugs/bugrepro-babel-loader-esm-01/node_modules/@babel/core/lib/config/files/import.js:9:3)
   

This means that something (webpack-cli maybe, or webpack itself) is running babel-loader inside a Node.js vm script, and it's disabling import() calls because it does not provide the importModuleDynamically option to vm.Script.

[kroko]

@nicolo-ribaudo thanks for your time and insights. I guess I'll keep this ticket open as a passive tracker for if/when things change in ESLint / webpack / webpack-cli (?)

[keenwon]

I have the same issues

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /home/keenwon/Code/test/babel.config.mjs: Error while loading config - Invalid host defined options
    at import_ (/home/keenwon/Code/test/node_modules/@babel/core/lib/config/files/import.js:9:3)
    at /home/keenwon/Code/test/node_modules/@babel/core/lib/config/files/module-types.js:100:26
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/keenwon/Code/test/node_modules/@babel/core/lib/config/files/module-types.js:40:103)
    at _next (/home/keenwon/Code/test/node_modules/@babel/core/lib/config/files/module-types.js:42:194)
    at /home/keenwon/Code/test/node_modules/@babel/core/lib/config/files/module-types.js:42:364
    at new Promise (<anonymous>)
    at /home/keenwon/Code/test/node_modules/@babel/core/lib/config/files/module-types.js:42:97
    at _loadMjsDefault (/home/keenwon/Code/test/node_modules/@babel/core/lib/config/files/module-types.js:103:26)
    at loadMjsDefault (/home/keenwon/Code/test/node_modules/@babel/core/lib/config/files/module-types.js:91:26)

webpack 5.58.2 compiled with 1 error in 649 ms

https://github.com/webpack/webpack/issues/14494

repo: https://github.com/keenwon/test