React macros are broken when using the OXC-based React Compiler

[AFCMS]

Recently, Vite's React plugin added support for an OXC-based port of the React Compiler, not relying on a Babel pass.

For reference:

• https://github.com/vitejs/vite-plugin-react/releases/tag/plugin-react%406.1.0
• feat(react): add native React Compiler support vitejs/vite-plugin-react#1419

This yields massive performance improvements when enabled (I have seen some build times reduced by half).

But when using Lingui, it seems the React macros, Trans and Plural become undefined at runtime (dev and prod) with a console error message like Uncaught ReferenceError: Trans is not defined.

const { t } = useLingui() is not affected.

I have setup a reproduction here: AFCMS/vite-lingui-test#1 (master branch is with Babel compiler)

I am unsure where the issue comes from.

[timofei-iatsenko]

@AFCMS change the order of babel plugin with react plugin:

import { lingui, linguiTransformerBabelPreset } from "@lingui/vite-plugin";
import babel from "@rolldown/plugin-babel";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    babel({ presets: [linguiTransformerBabelPreset()] }), // <-- should be before React plugin, to be able to transform Trans tags before react compiler transform them
    react({ compiler: true }),
    lingui(),
  ],
});

I tested it on your example and it works.

[AFCMS]

Thanks! I completly forgot about the unusual Babel plugin ordering 😅