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

kroko · 2021-03-05T07:14:35Z

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!

The text was updated successfully, but these errors were encountered:

JLHwung · 2021-03-05T15:17:47Z

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

nicolo-ribaudo · 2021-03-05T15:35:32Z

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 · 2021-03-05T15:43:11Z

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 · 2021-03-05T15:45:12Z

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 · 2021-03-05T15:49:25Z

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 · 2021-03-05T15:54:32Z

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 · 2021-03-05T15:55:47Z

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

kroko · 2021-03-06T11:49:33Z

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 · 2021-03-06T16:28:47Z

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

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.

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 · 2021-03-06T16:35:29Z

@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 · 2021-10-17T12:54:15Z

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

Configure project to use ES6 modules to enable top-level await capabilities. This change helps project to align well with modern JS standards. - Set `type` to `module` in `package.json`. - Use import/export syntax in Cypress configuration files. - Rename configurations files that do not support modules to use the `.cjs` extension: - `vue.config.js` to `vue.config.cjs` (vuejs/vue-cli#4477). - `babel.config.js` to `babel.config.cjs (babel/babel-loader#894) - `.eslintrc.js` to `.eslintrc.cjs` (eslint/eslint#13440, eslint/eslint#14137) - `postcss.config.js` to `postcss.config.cjs` (postcss/postcss#1771)

Configure project to use ES6 modules to enable top-level await capabilities. This change helps project to align well with modern JS standards. - Set `type` to `module` in `package.json`. - Use import/export syntax in Cypress configuration files. - Rename configurations files that do not support modules to use the `.cjs` extension: - `vue.config.js` to `vue.config.cjs` (vuejs/vue-cli#4477). - `babel.config.js` to `babel.config.cjs (babel/babel-loader#894) - `.eslintrc.js` to `.eslintrc.cjs` (eslint/eslint#13440, eslint/eslint#14137) - `postcss.config.js` to `postcss.config.cjs` (postcss/postcss#1771) - Provide a workaround for Vue CLI & Mocha ES6 modules conflict in Vue configuration file (vuejs#7417).

Configure project to use ES6 modules to enable top-level await capabilities. This change helps project to align well with modern JS standards. - Set `type` to `module` in `package.json`. - Use import/export syntax in Cypress configuration files. - Rename configurations files that do not support modules to use the `.cjs` extension: - `vue.config.js` to `vue.config.cjs` (vuejs/vue-cli#4477). - `babel.config.js` to `babel.config.cjs (babel/babel-loader#894) - `.eslintrc.js` to `.eslintrc.cjs` (eslint/eslint#13440, eslint/eslint#14137) - `postcss.config.js` to `postcss.config.cjs` (postcss/postcss#1771) - Provide a workaround for Vue CLI & Mocha ES6 modules conflict in Vue configuration file (vuejs/vue-cli#7417).

thescientist13 mentioned this issue Nov 26, 2021

Chore/issue 532 esm upgrade ProjectEvergreen/greenwood#707

Merged

17 tasks

This was referenced Dec 4, 2021

0.20.0 release branch (ESM migration) ProjectEvergreen/greenwood#815

Merged

restore support for extending babel configuration ProjectEvergreen/greenwood#817

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kroko commented Mar 5, 2021 •

edited

Loading

JLHwung commented Mar 5, 2021

nicolo-ribaudo commented Mar 5, 2021 •

edited

Loading

UsamaHameed commented Mar 5, 2021

nicolo-ribaudo commented Mar 5, 2021

UsamaHameed commented Mar 5, 2021 •

edited

Loading

JLHwung commented Mar 5, 2021

nicolo-ribaudo commented Mar 5, 2021

kroko commented Mar 6, 2021

nicolo-ribaudo commented Mar 6, 2021

kroko commented Mar 6, 2021

keenwon commented Oct 17, 2021

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

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

Comments

kroko commented Mar 5, 2021 • edited Loading

JLHwung commented Mar 5, 2021

nicolo-ribaudo commented Mar 5, 2021 • edited Loading

UsamaHameed commented Mar 5, 2021

nicolo-ribaudo commented Mar 5, 2021

UsamaHameed commented Mar 5, 2021 • edited Loading

JLHwung commented Mar 5, 2021

nicolo-ribaudo commented Mar 5, 2021

kroko commented Mar 6, 2021

nicolo-ribaudo commented Mar 6, 2021

kroko commented Mar 6, 2021

keenwon commented Oct 17, 2021

kroko commented Mar 5, 2021 •

edited

Loading

nicolo-ribaudo commented Mar 5, 2021 •

edited

Loading

UsamaHameed commented Mar 5, 2021 •

edited

Loading