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)

Most upvoted comments

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

JLHwung on Aug 4, 2022

@Slapbox

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

budarin on Aug 3, 2022

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

budarin on May 17, 2022

Fix published

nicolo-ribaudo on May 16, 2022

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.

nicolo-ribaudo on May 6, 2022

@JLHwung

Thanks! 💥💥💥

budarin on Aug 5, 2022

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

nicolo-ribaudo on May 6, 2022

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

JLHwung on Aug 5, 2022

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.

nicolo-ribaudo on Aug 4, 2022

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

JLHwung on Aug 4, 2022

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.

nicolo-ribaudo on Apr 5, 2022