[Bug]: @babel/plugin-transform-regenerator doesn't bind const in inner loop

[IlyaSemenov]

💻

• Would you like to work on a fix?

How are you using Babel?

@babel/cli

Input code

async function main() {
  const obj = {}
  for (const key of ['foo', 'bar']) {
    obj[key] = () => key
  }
  console.log(obj.foo())
}

main()

REPL

Configuration file name

No response

Configuration

babel --plugins @babel/plugin-transform-regenerator 1.js

Current and expected behavior

Current behaviour: the compiled script writes bar.

Expected behaviour (that is what you get if you run it unprocessed): the script writes foo.

Output code

function main() {
  var obj, key;
  return _regeneratorRuntime().async(function main$(_context) {
    while (1) switch (_context.prev = _context.next) {
      case 0:
        obj = {};
        for (key of ['foo', 'bar']) {
          obj[key] = () => key;
        }
        console.log(obj.foo());
      case 3:
      case "end":
        return _context.stop();
    }
  }, null, null, null, Promise);
}
main();

Environment

System:
OS: macOS 13.1
Binaries:
Node: 16.19.0 - ~/.nodenv/versions/16.19.0/bin/node
Yarn: 1.22.19 - ~/.nodenv/versions/16.19.0/bin/yarn
npm: 8.19.3 - ~/.nodenv/versions/16.19.0/bin/npm
npmPackages:
@babel/cli: ~7.21.0 => 7.21.0

Possible solution

const in regenerated loops should not be converted to vars blindly. Rather, the loops should be converted to ad-hoc functions (see how Facebooks regenerator does that).

Additional context

Facebook regenerator handles this case properly:

function main() {
  var obj, _loop, _i, _arr, key;
  return regeneratorRuntime.async(function main$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          obj = {};
          _loop = function (key) {
            obj[key] = function () {
              return key;
            };
          };
          for (_i = 0, _arr = ['foo', 'bar']; _i < _arr.length; _i++) {
            key = _arr[_i];
            _loop(key);
          }
          console.log(obj.foo());
        case 4:
        case "end":
          return _context.stop();
      }
    }
  }, null, null, null, Promise);
}
main();

[babel-bot]

Hey @IlyaSemenov! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[nicolo-ribaudo]

@babel/plugin-transform-regenerator is just Facebook's regenerator. It works if you enable the block scoping and arrow functions plugins, which is what regenerator does:
https://github.com/facebook/regenerator/blob/c24b7b7259ee8a6cea192c220860cc81bafb4571/packages/preset/index.js#L13-L14

[IlyaSemenov]

Thank you for the quick response! Enabling these two plugins indeed helps. But shouldn't they be automatically enabled somehow? I mean, that is not right that Babel silently emits misbehaving code?

I also discovered #12806 but I'm not sure if my issue is a full duplicate or not.

[IlyaSemenov]

Closing as duplicate of #12806