-
-
Notifications
You must be signed in to change notification settings - Fork 433
Description
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 declarationMoving @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
Reproduction Steps
-
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 -
Add the react compiler by installing
babel-plugin-react-compiler@latestand 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(), ], });
-
Add a component that imports
useLinguifrom@lingui/react/macroand get a reference to thetobject:import { useLingui } from '@lingui/react/macro'; export function App() { const { t } = useLingui(); return <p>{t`hello`}</p>; }
-
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