[Bug]: After upgrading to babel-plugin-transform-react-constant-elements v7.17.6 our application has stopped working correctly

[budarin]

💻

• 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

[babel-bot]

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

[nicolo-ribaudo]

Unfortunately it's quite hard to understand what's the bug, we need an example or a repository we can clone to reproduce it. Which was the previous @babel/plugin-transform-react-constant-elements version you were using?

[budarin]

previous working version was 7.16.7

I'll try to create repo for demonstrating the bug

[noahnu]

We're seeing this as well where our app stopped working correctly after upgrading from 7.16.7 to 7.17.6 for @babel/plugin-transform-react-constant-elements. I'm still investigating on our side to try get a reliable reproduction, however from what I've seen, I think a component is getting the wrong prop value (or the prop value is getting stale somehow).

I assume it's a regression from #12975, but I don't understand the PR well enough to identify what could be causing the broken behaviour. I'll post an update if I can determine the exact failure case.

[nicolo-ribaudo]

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.

[budarin]

@nicolo-ribaudo

Unfortunately it's quite hard to understand what's the bug, we need an example or a repository we can clone to reproduce it. Which was the previous @babel/plugin-transform-react-constant-elements version you were using?

Here is the demo with the bug'

[nicolo-ribaudo]

Thank you!

[nicolo-ribaudo]

It took a while, but thanks to your repository I found the bug 🥳

[nicolo-ribaudo]

This code:

function RoutesComponent() {
  return (
    <Routes>
      {(c) => {
        {
          const Component = c;
          return <Component />;
        }
      }}
    </Routes>
  );
}

is transformed to this:

var _Component;

function RoutesComponent() {
  return (
    <Routes>
      {(c) => {
        {
          const Component = c;
          return _Component || (_Component = <Component />);
        }
      }}
    </Routes>
  );
}

which is wrong because Component might change and thus it shouldn't be cached.

[Nantris]

Mentioning this as a bug/breaking change in the broken versions would be hugely helpful even though it's apparently fixed now. I spent a full day tracking down this bug.

[Nantris]

Also, is there an ETA for #14536 to be published? This is a pretty serious bug if pushed to production which irreversibly corrupts data in our app.

Given the dangers, I think version 7.17.6 should be pulled.

[nicolo-ribaudo]

Fix published

[budarin]

@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.

[Nantris]

7.17.12 works for us so I guess that there are multiple underlying issues here. We're going to continue using 7.16.x to be safe though.

[Nantris]

@budarin is this issue still affecting you? We've been hesitant to upgrade again for fear of re-introducing a critical flaw that does irreversible damage to user's data, but I haven't seen anyone else mention they're still having trouble.

[budarin]

@slapbox

The problem is still actual (I have upgraded the dependencies to the latest versions)

[Nantris]

@nicolo-ribaudo do you have any thoughts on resolving this? Babel has always been reliable for us until this issue began, and so far it's already sapped more than an entire day's work for us, and it would be far far worse had we pushed it to production before discovering the bug.

[JLHwung]

@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 #14363 (comment).

[Nantris]

Thanks for the reply @JLHwung. Presumably @budarin's repro should work: https://github.com/budarin/plugin-transform-react-constant-elements-bug

It doesn't break our app, as far as I know - but it's that "as far as I know" that's troubling to us, because it took me nearly a month to even notice the subtle bug this plugin introduced for us last time.

Additionally, it can be quite difficult to create a repro for an error in a transpiler, much less a minimally reproducible one - unless you're pretty well versed in what the transpiler is doing, as @nicolo-ribaudo as the number 3 contributor presumably is.

[nicolo-ribaudo]

If 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.

[JLHwung]

I can reproduce the bug on REPL. @nicolo-ribaudo Enjoy the vacation. I will take a look today.

[JLHwung]

Fixed in @babel/plugin-transform-react-constant-elements 7.18.12

[budarin]

@JLHwung

Thanks! 💥💥💥