[Bug]: @babel/plugin-transform-react-constant-elements transforms non constant element in for loop #13760
Description
💻
- 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