[Bug]: @babel/plugin-transform-react-constant-elements transforms non constant element in for loop

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

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

Configuration file name

babel.config.js

Configuration

module.exports = {
  env: {
    production: {
      plugins: [
        '@babel/plugin-transform-react-inline-elements',
        '@babel/plugin-transform-react-constant-elements',
        ['transform-react-remove-prop-types', { removeImport: true }],
      ],
    },
    test: {
      plugins: [['babel-plugin-webpack-alias', { config: './webpack/path-aliases.config.js' }]],
    },
  },
  plugins: [
    [
      '@babel/plugin-transform-typescript',
      {
        allowDeclareFields: true,
        isTSX: true,
      },
    ],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-proposal-optional-chaining',
    ['@babel/plugin-proposal-private-methods', { loose: true }],
    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
    '@babel/plugin-transform-runtime',
    'babel-plugin-generate-i18n-id',
    'react-hot-loader/babel',
  ],
  presets: [['@babel/preset-env', { loose: true }], '@babel/preset-react'],
};

Current and expected behavior

When the code is transformed the element is treated as constant when both transform-block-scoping and transform-react-constant-elements are used. incorrect vs correct

Environment

System:
    OS: macOS 11.4
  Binaries:
    Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm
  npmPackages:
    @babel/core: 7.15.0 => 7.15.0
    @babel/plugin-proposal-class-properties: 7.14.5 => 7.14.5
    @babel/plugin-proposal-export-default-from: 7.14.5 => 7.14.5
    @babel/plugin-proposal-export-namespace-from: 7.14.5 => 7.14.5
    @babel/plugin-proposal-nullish-coalescing-operator: 7.14.5 => 7.14.5
    @babel/plugin-proposal-object-rest-spread: 7.14.7 => 7.14.7
    @babel/plugin-proposal-optional-chaining: 7.14.5 => 7.14.5
    @babel/plugin-transform-react-constant-elements: 7.14.5 => 7.14.5
    @babel/plugin-transform-react-inline-elements: 7.14.5 => 7.14.5
    @babel/plugin-transform-runtime: 7.15.0 => 7.15.0
    @babel/preset-env: 7.15.0 => 7.15.0
    @babel/preset-react: 7.14.5 => 7.14.5
    @babel/preset-typescript: 7.15.0 => 7.15.0
    @babel/register: 7.15.3 => 7.15.3
    @babel/runtime: 7.15.4 => 7.15.4
    babel-eslint: 10.1.0 => 10.1.0
    babel-jest: 27.0.6 => 27.0.6
    babel-loader: 8.2.2 => 8.2.2
    babel-plugin-generate-i18n-id: 1.4.12 => 1.4.12
    babel-plugin-istanbul: 6.0.0 => 6.0.0
    babel-plugin-transform-react-remove-prop-types: 0.4.24 => 0.4.24
    babel-plugin-webpack-alias: 2.1.2 => 2.1.2
    eslint: 7.32.0 => 7.32.0
    eslint-plugin-babel: 5.3.1 => 5.3.1
    jest: 27.0.6 => 27.0.6
    webpack: 4.44.2 => 4.44.2

Possible solution

Add an exception for this case here: https://github.com/babel/babel/blob/main/packages/babel-plugin-transform-react-constant-elements/src/index.js#L75

Additional context

No response

[rufman]

I’ve started digging into the code.

[nicolo-ribaudo]

Add an exception for this case here: https://github.com/babel/babel/blob/main/packages/babel-plugin-transform-react-constant-elements/src/index.js#L75

I think a better solution would be in @babel/traverse, where we set binding.constant: if a var declaration is defined in a loop, it’s not a constant (it’s reassigned as many times as the loop runs).

---

I’m assigning this to you, since you ticked the “Would you like to work on a fix?” bug. If you need any help, or you don’t want to work on it anymore, let us know!

If it is the first time that you contribute to Babel, follow these steps: (you need to have make and yarn available on your machine)

1. Write a comment there to confirm to other possible contributors know that you are working on this bug.
2. Fork the repo
3. Run git clone https://github.com/<YOUR_USERNAME>/babel.git && cd babel
4. Run yarn && make bootstrap
5. Wait ⏳
6. Run make watch (or make build whenever you change a file)
7. Add a test in the constant-elements package (only input.js; output.js will be automatically generated)
8. Add a unit test for @babel/traverse
9. Update the code!
10. yarn jest constant-elements and ``yarn jest traverse` to run the tests
    • If some test outputs don’t match but the new results are correct, you can delete the bad output.js files and run the tests again
    • If you prefer, you can run OVERWRITE=true yarn jest constant-elements and they will be automatically updated.
11. If it is working, run make test to run all the tests
12. Run git push and open a PR!