js-lingui: v3 t macro not working?

I’m trying to use the t macro from @lingui/macro@3.0.0-11 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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 19 (6 by maintainers)

Most upvoted comments

I am using “next” and i have the same issue… from react, if I output <div>{t\whatever} it doesn’t get translated, butwhatever does …

@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

@tricoder42 I saw you reply to telpochyaotl but I don’t understand what you meant with “I made this behavior opt-out.” I’m having the same issue. I’m generating a translation message in a helper function, outside a functional component. But when I use a macro to display the text in JSX as
<div>
  {t({ 
    id: "ProfileForm.FieldRequired", 
    message: "Required field"
  })}
</div>
no matter what the current locale is, “Required field” is always displayed, and if I remove the message property, “ProfileForm.FieldRequired” is displayed.

If I put this, it works as expected with each locale but that’s not what I need in my use case:
<Trans id="ProfileForm.FieldRequired"></Trans>
Any idea on how to fix it? Thank you!

Fixed it! Since the project I’m working on was last updated 8 months ago by the owner, he was calling the i18n config as (maybe in an old version it worked this way?)

import { setupI18n } from "@lingui/core";
export const i18n = setupI18n();

changed it to (after updating the library to the latest version)

import { i18n as i18n_config } from "@lingui/core";
export const i18n = i18n_config;

and the t() macro started working fine in a JSX file.

Thanks!

avalladaresm on Aug 31, 2021

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

tricoder42 on Oct 21, 2020

@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

tricoder42 on Oct 11, 2020