babel: [Bug]: After upgrading to babel-plugin-transform-react-constant-elements v7.17.6 our application has stopped working correctly
💻
- Would you like to work on a fix?
How are you using Babel?
babel-loader (webpack)
Input code
It is difficult to cite the code of the entire application and it is unclear at what point the failure occurs
Configuration file name
babel.config.js
Configuration
const coreJsVer = require('./coreJsVer');
const isTesting = process.env.NODE_ENV === 'test';
const isDev = process.env.NODE_ENV !== 'production';
module.exports = function (api) {
api.cache.using(() => process.env.NODE_ENV);
return {
comments: true,
presets: [
[
'@babel/preset-env',
{
loose: true,
debug: false,
modules: isTesting ? 'commonjs' : false,
corejs: {
version: coreJsVer,
proposals: true,
},
useBuiltIns: 'usage',
bugfixes: true,
},
],
[
'@babel/preset-react',
{
useBuiltIns: true,
runtime: 'automatic',
development: isDev,
},
],
'@babel/typescript',
],
plugins: ['./lazyComponentBabelPlugin.js', 'preval'],
env: {
production: {
plugins: [
'babel-plugin-transform-imports',
'babel-plugin-react-local',
// '@babel/plugin-transform-react-constant-elements',
],
ignore: ['**/*.test.tsx', '**/*.test.ts', '__snapshots__', '__tests__'],
},
development: {
plugins: [],
ignore: ['**/*.test.tsx', '**/*.test.ts', '__snapshots__', '__tests__'],
},
test: {
ignore: ['__snapshots__'],
},
},
};
};
Current and expected behavior
After updating the plugin, navigation in the application with react-router with code splitting stopped working
If you disable the plugin, everything works fine
Environment
- “@babel/core”: “^7.17.7”
- Node v16.9.0
- Yarn 1.22.15
- OS: any
- Monorepo: no
Possible solution
No response
Additional context
No response
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 2
- Comments: 23 (10 by maintainers)
I can reproduce the bug on REPL. @nicolo-ribaudo Enjoy the vacation. I will take a look today.
@Slapbox
The problem is still actual (I have upgraded the dependencies to the latest versions)
@nicolo-ribaudo
Today I updated almost all dependencies in the project, including
"@babel/plugin-transform-react-constant-elements": "^7.17.12",
The problem has remained - the project does not work with the plugin 😦 Without the plugin - it works.
Fix published
This code:
is transformed to this:
which is wrong because
Component
might change and thus it shouldn’t be cached.@JLHwung
Thanks! 💥💥💥
It took a while, but thanks to your repository I found the bug 🥳
Fixed in
@babel/plugin-transform-react-constant-elements
7.18.12If that repository still has the bug, it’s enough for us. I’m on vacation until the end of next week, but I’ll then take a look again at this.
@Slapbox Can you provide a reproduction repo so we can take a look? It would be great if you can come up with a minimal reproducible examples like Nicolò did in https://github.com/babel/babel/issues/14363#issuecomment-1120040006.
Yes, it’s likely to be caused by that PR but I’m not sure about what in that PR could cause this bug.
Unfortunately without a reproduction test we cannot really revert the PR and re-land it fixed, because we would just risk re-introducing the bug.
That PR should only change the behavior of functions passed as props, if that may help tracking down the component that is affected by this bug.