js-lingui icon indicating copy to clipboard operation
js-lingui copied to clipboard

Compatible with React Compiler?

Open zhuscat opened this issue 2 months ago β€’ 10 comments

React Compiler has now launched version 1.0. It seems that usages like directly using i18n.date or i18n.number inline within components, as mentioned in the documentation (https://lingui.dev/tutorials/react), will be memoized. Should Lingui become more "React Compiler" friendly?

zhuscat avatar Oct 14 '25 13:10 zhuscat

Could you elaborate what exactly should be changed?

timofei-iatsenko avatar Oct 15 '25 09:10 timofei-iatsenko

If you use "babel-plugin-react-compiler" and "@lingui/babel-plugin-lingui-macro" together, you will get Error: Cannot read properties of undefined (reading 'raw') on this line since node.extra isn’t always defined.

alex-kinokon avatar Oct 21 '25 06:10 alex-kinokon

Put @lingui/babel-plugin-lingui-macro before react compiler

timofei-iatsenko avatar Oct 21 '25 07:10 timofei-iatsenko

React Compiler must run first in your Babel plugin pipeline. The compiler needs the original source information for proper analysis, so it must process your code before other transformations.

React docs.

alex-kinokon avatar Oct 21 '25 15:10 alex-kinokon

Still same here, put @lingui/babel-plugin-lingui-macro before react compiler

timofei-iatsenko avatar Oct 22 '25 06:10 timofei-iatsenko

Can you update the docs to tell the end users to disregard this requirement from React?

alex-kinokon avatar Oct 22 '25 14:10 alex-kinokon

It's already there https://lingui.dev/installation#choosing-a-transpiler

timofei-iatsenko avatar Oct 23 '25 06:10 timofei-iatsenko

Could you elaborate what exactly should be changed?

@timofei-iatsenko The most core part that needs to be modified might be const { i18n } = useLingui()? Because i18n always maintains an unchanged reference, and the documentation also allows using i18n in components like this:

<div>{i18n.number(1)}</div>
<div>{i18n.date(...)}</div>

Since the i18n reference remains unchanged, React Compiler will cache the calls to i18n.number or i18n.date.

zhuscat avatar Oct 24 '25 11:10 zhuscat

@timofei-iatsenko

The main issue is that i18n is an immutable reference, and the documentation uses i18n.date and i18n.number for date and number formatting, which causes problems under React Compiler. Are there any plans to change this? Or what would be the recommended workaround for now?

zhuscat avatar Nov 10 '25 16:11 zhuscat

These methods going to be deprecated soon FYI https://github.com/lingui/js-lingui/issues/2265

So the workaraound is to use i18n.locale + intl metods. However, i18n.locale would have the same issue as described here. I think it would be nice to just extract locale on the level up in the const {locale} = useLingui()

timofei-iatsenko avatar Nov 11 '25 10:11 timofei-iatsenko