Skip to content

Following the react setup guide breaks react-compiler compilation #2355

@vruffer

Description

@vruffer

Description

Hello,

When reading the installation guide, there is a warning banner:

⚠️ CAUTION
If you're using React Compiler, make sure that @lingui/babel-plugin-lingui-macro comes before the React Compiler plugin in the Babel plugins list. This ensures macros are expanded correctly before the compiler processes the code.

Following the above instruction breaks the compilation of files where you import useLingui from @lingui/react/macro and retrieve a reference to the t function from from the useLingui hook:

import { useLingui } from '@lingui/react/macro';

function Fun() {
      const {t} = useLingui();
      //         ^ (BuildHIR::lowerAssignment) Could not find binding for declaration

Moving @lingui/babel-plugin-lingui-macro (or babel-plugin-macro) below babel-plugin-react-compiler, in the babel plugin array makes the compilation work again.

Note that this error (like all react-compiler errors) silently causes the compiler to skip the file unless you specify that it should stop compilation in your babel config:

plugins: [
    '@lingui/babel-plugin-lingui-macro',
    ['babel-plugin-react-compiler', { panicThreshold: 'critical_errors' }], // default is 'none'
  ],

link to react compiler option.

I'm not exactly sure when the error was introduced (we recently decided to adopt the react-compiler), so I don't know if this is caused by an update to the compiler, to lingui, or if it's always been this way.

For reference, the docs were updated because of a previous issue, where lingui-compilation would fail when the react-compiler plugin was first: #2239

Verifications

  • I've checked the docs and this isn't covered there.
  • I've searched existing issues on GitHub.

Reproduction Steps

  1. Create a new lingui + react + vite (minimal typescript setup with babel npm create vite@latest --template react-ts) setup following the lingui installation guide and the react setup guide

  2. Add the react compiler by installing babel-plugin-react-compiler@latest and adding it to the vite-babel plugins:

    export default defineConfig({
      plugins: [
        react({
          babel: {
            plugins: [
              '@lingui/babel-plugin-lingui-macro',
              [
                'babel-plugin-react-compiler',
                {
                  panicThreshold: 'critical_errors', // this is important, the compiler fails silently otherwise
                },
              ],
            ],
          },
        }),
        lingui(),
      ],
    });
  3. Add a component that imports useLingui from @lingui/react/macro and get a reference to the t object:

    import { useLingui } from '@lingui/react/macro';
    export function App() {
      const { t } = useLingui();
      return <p>{t`hello`}</p>;
    }
  4. Run the project using vite dev

I made a minimal repro, that has followed the above steps exactly: https://github.com/vruffer/lingui-react-compiler-error

Expected Behavior

I expected the lingui docs to correctly guide where in the plugin array it should be in relation to the react-compiler.

Macro Support

Babel with babel-macro-plugin

Lingui Version

5.5.1

Babel Version

7.28.4

Framework

vite@7.1.7

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions