[Bug]: transform error when use two loops in one function with @babel/plugin-transform-block-scoping@7.20.9

[Erucy]

💻

• Would you like to work on a fix?

How are you using Babel?

Programmatic API (babel.transform, babel.parse)

Input code

const test = (data) => {
  for (let i = 0; i < data.length; i++) {
    const x = data[i];
    data.find((item) => item === x);
  }
  for (let i = 0; i < data.length; i++) {
    const x = data[i];
    data.find((item) => item === x);
  }
}

Configuration file name

.babelrc

Configuration

{
"presets": [
"@babel/preset-env"
]
}

Current and expected behavior

current output:

"use strict";

var test = function test(data) {
  var _loop = function _loop() {
    var x = data[i];
    data.find(function (item) {
      return item === x;
    });
  };
  for (var i = 0; i < data.length; i++) {
    _loop();
  }
  var _loop2 = function _loop2() {
    var x = data[i];
    data.find(function (item) {
      return item === x;
    });
  };
  for (var _i = 0; _i < data.length; _i++) {
    _loop2();
  }
};

the second var x = data[i]; should be var x = data[_i];

Environment

System:
OS: macOS 12.6.2
Binaries:
Node: 14.19.0 - /usr/local/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 6.14.16 - /usr/local/bin/npm
npmPackages:
@babel/cli: ^7.17.6 => 7.17.6
@babel/core: ^7.20.7 => 7.20.7
@babel/node: ^7.16.8 => 7.16.8
@babel/plugin-transform-block-scoping: ^7.20.9 => 7.20.9
@babel/preset-env: ^7.16.11 => 7.16.11

Possible solution

No response

Additional context

No response

[babel-bot]

Hey @Erucy! 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.

[nskazki]

@babel/plugin-transform-block-scoping@7.20.7 is the first affected version

[hanzooo]

The Same issue happened to me，with the latest version 7.20.11

[aaronhargrove-grub]

Also having this issue on 7.20.11

[liuxingbaoyu]

@hanzooo @aaronhargrove-grub Can you provide a repo to reproduce it?

[aaronhargrove-grub]

@liuxingbaoyu This repl reproduces the issue. Seems to be tied to the type in the file in our case

[liuxingbaoyu]

Thank you for your report!

[liuxingbaoyu]

https://babeljs.io/repl/#?browsers=node%204&build=&builtIns=usage&corejs=3.21&spec=false&loose=false&code_lz=C4TwDgpgBAyg9gWwgGTnA1gVzFAvFAbwCgooBtASwDsATCADwC4orMEAjCAJwF1mBDKiDI8A3EQC-4ogDNMVAMbAKcKlBloAQvy4AKHV34gA8jIAqAC2oBzAM4BKQqRKl1cLlF0AbCMCjU6ejwoAAZRf1oGKAAeKAMjU0sbWwA6HyprYAtwgIYAajzHYldXBVVbPyybYPiTcysM20pI-jEXErKqCqhbRAgAWX4wY3YAK2CCKXbXHz8DOAB3YN16R1wAPh6-weGx8RLSeYXde2mJSSJZLR1dMgBGABoAJgeAZh57IA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Ctypescript&prettier=false&targets=&version=7.20.12&externalPlugins=&assumptions=%7B%7D
Here's a smaller reproducible repl.

There are two problems here.

1. Outdated binding information causes renaming to fail.
2. index was incorrectly registered to scope.globals.

type SomeLookup = {
   [index: number]: FooBarType[];
};

The real fix should be 1, which seems a bit tricky to fix.
Since our scope.rename is actually implemented using traverseNode, rename will not work properly when it is split into two blocks.
The way I figured it out is to do the renaming before wrapLoopBody, but so far I haven't been able to get TDZ to continue working properly.

@nicolo-ribaudo If you plan on doing it too feel free to do it! If not I'll keep trying tomorrow.

[JLHwung]

Fixed in v7.20.14.