Why does Babel transpile async functions to generators via _asyncToGenerator if target supports async/await?

[nlucero]

I'm trying to understand why my transpiled code transforms regular async functions to generators via _asyncToGenerator if the compilation target already supports async functions.

I'm using @babel/preset-env and targeting node >=16.0.0 via targets. This is my config file:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: `node >=16.0.0`,
        },
      },
    ],
  ],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-private-methods', { loose: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    [
      'module-resolver',
      {
        root: ['./src'],
      },
    ],
  ],
}

If I inspect my transpiled code, I see my async functions are transpiled to something like this:

var login = /*#__PURE__*/function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(req, res) {
    var _req$body, username, password, token, name, cookieConfig;

    return regeneratorRuntime.wrap(function _callee$(_context) {
      // Implementation here
    }, _callee);
  }));

  return function login(_x, _x2) {
    return _ref.apply(this, arguments);
  };
}();

This seems unnecessary to me since my transpilation target (node v16.x.x) fully supports async functions. Is there a good reason why this is being done this way? Could it be a misconfiguration on my end?

For more context, the transpiled code uses native async functions (no _asyncToGenerator whatsoever) if I set my target to node>=14.0.0, so this might be a regression introduced recently.

[JLHwung]

Can you update browserslists to the latest version? The browserslists comes with a node-releases package which tells browserslists the currently known node versions.

My guess here is that if node v14 works for you, then the node-releases may be out-of-dated and browserslists thinks that node >= 16.0.0 is unknown node versions, which causes Babel fallbacks to applying all transforms.

You can also add debug: true to the preset-env options, which will print the resolved browsers targets.

[nicolo-ribaudo]

I opened #13913 to track this because I can reproduce it in our repo.

[nlucero]

@JLHwung Is browserslists a dependency of Babel? yarn list browserslists reports nothing in my repo. I've tried updating all my Babel deps to their latest versions but I still can reproduce the error.

Running it with debug: true for node>=16.0.0 reports this:

@babel/preset-env: `DEBUG` option

Using targets:
{}

Using modules transform: auto

Using plugins:
  proposal-class-static-block { }
  proposal-private-property-in-object { }
  proposal-class-properties { }
  proposal-private-methods { }
  proposal-numeric-separator { }
  proposal-logical-assignment-operators { }
  proposal-nullish-coalescing-operator { }
  proposal-optional-chaining { }
  proposal-json-strings { }
  proposal-optional-catch-binding { }
  transform-parameters { }
  proposal-async-generator-functions { }
  proposal-object-rest-spread { }
  transform-dotall-regex { }
  proposal-unicode-property-regex { }
  transform-named-capturing-groups-regex { }
  transform-async-to-generator { }
  transform-exponentiation-operator { }
  transform-template-literals { }
  transform-literals { }
  transform-function-name { }
  transform-arrow-functions { }
  transform-block-scoped-functions { }
  transform-classes { }
  transform-object-super { }
  transform-shorthand-properties { }
  transform-duplicate-keys { }
  transform-computed-properties { }
  transform-for-of { }
  transform-sticky-regex { }
  transform-unicode-escapes { }
  transform-unicode-regex { }
  transform-spread { }
  transform-destructuring { }
  transform-block-scoping { }
  transform-typeof-symbol { }
  transform-new-target { }
  transform-regenerator { }
  transform-member-expression-literals { }
  transform-property-literals { }
  transform-reserved-words { }
  proposal-export-namespace-from { }
  transform-modules-commonjs
  proposal-dynamic-import

And node>=14.0.0 reports this:

@babel/preset-env: `DEBUG` option

Using targets:
{
  "node": "14"
}

Using modules transform: auto

Using plugins:
  proposal-class-static-block { node }
  proposal-private-property-in-object { node }
  proposal-class-properties { node < 14.6 }
  proposal-private-methods { node < 14.6 }
  syntax-numeric-separator
  proposal-logical-assignment-operators { node < 15 }
  syntax-nullish-coalescing-operator
  proposal-optional-chaining { node }
  syntax-json-strings
  syntax-optional-catch-binding
  syntax-async-generators
  syntax-object-rest-spread
  transform-modules-commonjs
  proposal-dynamic-import
  proposal-export-namespace-from { }

So I think you're right: Babel doesn't seem to recognize node>=16.0.0 as a valid target and it's adding a lot of unnecessary plugins.

[nlucero]

@JLHwung I tried re-installing dependencies and it seems to be fixed now. node>=16.0.0 is recognized by Babel as a valid target. Thanks for your help!