@babel/plugin-transform-react-constant-elements@7.13.10 broken

[cgood92]

Bug Report

• I would like to work on a fix!

Current behavior
@babel/babel-plugin-transform-react-constant-elements@7.13.10 does not handle let variables that change correctly.

• REPL, Codesandbox

Input Code

function Example(){
  const nodes = []
  
  for (let i = 0; i < 10; i++) {
    nodes.push(<div key={i} children={i}></div>)
  }
  
  return nodes;
}

Expected behavior
In this case, this JSX should not be seen as constant

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.js

{
      "presets": ["react"],
      "plugins": [
        ["@babel/plugin-transform-react-constant-elements"],
      ])
}

Environment

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.10 - /usr/local/bin/npm
  npmPackages:
    @babel/core: 7.13.10 => 7.13.10 
    @babel/plugin-transform-react-constant-elements: 7.13.10 => 7.13.10
    @babel/plugin-transform-react-inline-elements: 7.12.13 => 7.12.13 
    @babel/plugin-transform-runtime: 7.13.10 => 7.13.10 
    @babel/preset-env: 7.13.12 => 7.13.12 
    @babel/preset-react: 7.12.13 => 7.12.13 
    @babel/runtime: ^7.13.10 => 7.13.10 
    babel-eslint: 10.1.0 => 10.1.0 
    babel-loader: 8.2.2 => 8.2.2 
    babel-plugin-emotion: 9.2.11 => 9.2.11 
    babel-plugin-transform-imports: 2.0.0 => 2.0.0 
    babel-plugin-transform-react-remove-prop-types: 0.4.24 => 0.4.24 
    eslint: 7.22.0 => 7.22.0 
    jest: 26.6.3 => 26.6.3 
    webpack: 5.27.2 => 5.27.2 

• How you are using Babel: webpack

Additional context
This is the commit that broke things: 8dacf85. V7.12.13 works fine.

[babel-bot]

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

[jridgewell]

This is an interaction with block-scoping and react-constant-elements: REPL

[jridgewell]

Wow, we overlooked a really simple case:

function Example(){
  const nodes = []
  
  for (var i = 0; i < 10; i++) {
    nodes.push(<div key={i} children={i}></div>)
  }
  
  return nodes;
}


function Example2(){
  const nodes = []
  let i = 0;
  for (; i < 10; i++) {
    nodes.push(<div key={i} children={i}></div>)
  }
  
  return nodes;
}

Neither of these should be constant.

@cgood92: You've marked that you'd like to fix this. It's actually really simple: When we find an Identifier in the JSX node, we should only consider it a constant element if the identifier is constant. Currently, we just ignore any Identifier:

babel/packages/babel-plugin-transform-react-constant-elements/src/index.js

Line 67 in 2ae19d0

path.isIdentifier() ||

if (path.isIdentifier()) {
  const binding = path.scope.getBinding(path.node.name);
  if (binding.constant) return;
}

[cgood92]

Thank you very much for your suggestion @jridgewell. I have attempted my first PR here: #13054. Can you please give feedback if this is not what you intended?

Thanks again.