Js-lingui: v3 t macro not working?

[ojii]

I'm trying to use the t macro from @lingui/[email protected] in a create react app, but it doesn't seem to actually display the translated value.

To reproduce, see https://github.com/ojii/lingui-v3-t-macro-example

I expect both h1 and h2 to show the same value, but only the one using the <Trans> macro works, the one using t just shows the message id.

[tricoder42]

Interesting. What if you move Message and Switcher components to a separate file? Does it fix the issue?

[amankkg]

I had a similar issue and I guess it's due to async loading of translations. I used useLingui hook and during next update of a component t macro also shows valid translation

[ljani]

I think I'm seeing the same problem. To me, it looks like the string is translated twice. Once without the correct instance and second time with the correct instance, but with wrong key (eg. Show 10):

i18n._(
  /*i18n*/
  _lingui_core__WEBPACK_IMPORTED_MODULE_1__["i18n"]._("Show {i}", {
    i: i
  }));

Thus, static texts work fine for me.

EDIT: If I log the type of the return value (key), it is string "Show 10":

const key =
/*i18n*/
_lingui_core__WEBPACK_IMPORTED_MODULE_1__["i18n"]._("Show {i}", {
  i: i
});
console.log(typeof key, JSON.stringify(key));

[ljani]

Production bundle seems to differ, it only returns Show, but in the correct translated language though. In development it always returns English Show 10 as the key is not found.

[telpochyaotl]

After looking at documentation and source code, and trying things out, i got this to work.

Using an approach like this:

 const WatchLocale = ({ children }) => {
   const { i18n: lingui } = useLingui();
   // Skip render when locale isn't loaded                                                                                           
   if (!lingui.locale) {
     return null;
   }
   // Force re-render when locale changes.                                                                                           
   // Otherwise string translations (ie: t`Macro`) won't be updated.                                                                 
   return <Fragment key={lingui.locale}>{children}</Fragment>;
 };

 const AppI18nProvider = ({ children }) => {
   useEffect(() => {
     activate('en-US');
   }, []);
   return (
     <I18nProvider i18n={i18n}>
       <WatchLocale>
         {children}
       </WatchLocale>
     </I18nProvider>
   );
 };

So i think this is not necessarily a blocker, though the reported behavior is true. It can be worked around.

[tricoder42]

@telpochyaotl Actually, in latest pre-release I made this behavior opt-out.

https://github.com/lingui/js-lingui/blob/f44ecdd7b6f47f1230262c73a3020e128820b162/packages/react/src/I18nProvider.tsx#L64-L71

[telpochyaotl]

@telpochyaotl Actually, in latest pre-release I made this behavior opt-out.

https://github.com/lingui/js-lingui/blob/f44ecdd7b6f47f1230262c73a3020e128820b162/packages/react/src/I18nProvider.tsx#L64-L71

Thank you so much, i will take a look at this to see what the implications of your change and statement are 👍

[ljani]

I was able to produce my issue with wrong translations. Here's a repro:
https://github.com/ljani/lingui-707

Running npm start and checking the dev tools shows these lines at least for me:

Key1: Hello
Translated1: Ahoj
Key2: My name is Bar
Translated2: My name is Bar
My name is Bar

Notice how the second one is not translated. The documentation states that the t macro should return MessageDescription and not the translation, which will be translated by i18n in turn, but it does not do that.

Should I open a new issue?

EDIT: Other issues related to macros:

• The import must be called t and not eg. import { t as tt } from "@lingui/macro". t conflicts with io-ts.
• I cannot rename i to i18n in index.js. Probably related to how that t macro is wired up.

[tricoder42]

@ljani It seems you're using v3, but lot of your code looks like v2. Could you please check the latest docs and create-react-app example in next branch (examples/create-react-app)? It was just updated to latest version in #769 so you might find some answers there

[ljani]

Are the docs published somewhere? I've been following the examples in https://js-lingui-git-next.lingui-js.now.sh/ref/macro.html

[tricoder42]

Yeah, that's the correct link. Lot of changes were published only few minutes ago, but looking at this page there're still outdated sections. I'll take a look later today

[ljani]

Oh, looking at the examples, you're not supposed to use setupI18n anymore? That's what got me confused as this page talks about setupI18n a lot.

[tricoder42]

setupI18n is optional now. If you use it, you should set runtimeConfigModule https://js-lingui-git-next.lingui-js.now.sh/ref/conf.html#runtimeconfigmodule, but unless you need something special, you're better off using the default i18n from @lingui/core

[ljani]

Great, many thanks for the clear up!