Lingui map translated content not showing

Question

I am using Lingui for translation from English to Arabic. I am using an array of objects to display my content. The issue I have is that the Arabic translation for the mapped array is not showing. The codes are in separate files.

import { t } from "@lingui/macro";
export const Courses = [
  {
    id: 0,
    name: t`Unlock the secrets of Open Science.`,
    description: t`A beginner-friendly course to introduce the concepts and practices of Open Science.`,
    icon: Github,
  },
  {
    id: 2,
    name: t`Your Open Science Journey Begins Here.`,
    description: t`Learn the basics of Open Science and start your journey towards more open and transparent research and education.`,
    icon: JavaScript,
  },
];

 

{Courses.map(({ id, name, icon, description }) => (
            <div key={id} className="courses-section__container-course">
              <div className="courses-section__container-course__icon-content">
                <img
                  src={icon}
                  className="courses-section__container-course__icon-content-icon"
                  alt={`${name} icon`}
                />
              </div>
              <h3 className="courses-section__container-course__name">
             {name}
              </h3>
              <p className="courses-section__container-course__description">
                {description}
              </p>
            </div>
          ))}

i18n.ts file:

import { i18n } from "@lingui/core";
import { en, ar} from "make-plural/plurals";

export const locales = {
  en: "English",
  ar: "Arabic",
};
export const defaultLocale = "en";

i18n.loadLocaleData({
  en: { plurals: en },
  ar: { plurals: ar },
});

i18n.load(defaultLocale, {});
i18n.activate(defaultLocale);

export async function dynamicActivate(locale: string) {
  const { messages } = await import(`./locales/${locale}/messages.ts`);
  i18n.load(locale, messages);
  i18n.activate(locale);
}

The .linguirc config

{
  "locales": ["en", "ar"],
  "sourceLocale": "en",
  "catalogs": [{
    "path": "src/locales/{locale}/messages",
    "include": ["src"]
  }],
  "format": "minimal",
  "compileNamespace": "ts"
}

Could you please also provide the code that loads the translations, as the code you provided doesn't have any glaring issues — Elias Schablowski, Mar 14 '23 at 22:26
It looks good as far as I can tell, the only reasons I can think of is 1. not running `lingui extract` and `lingui compile` 2. Not activating the locale (easy check is to rebuild with the default locale set to arabic) or 3. a caching issue/build path issue. (this is actually simpler than some of my designs with lingui) — Elias Schablowski, Mar 14 '23 at 22:51
There are other contents on the page and they perfectly displayed its Arabic text, it's only the mapped data that is not displaying the Arabic text — sandy, Mar 14 '23 at 22:59

score 0 · Accepted Answer · edited Mar 16 '23 at 18:16

The issue is that the t macro gets executed before the locale is fully loaded (assuming that the descriptions, etc. are included as text to be translated by lingui).

The best option to do this would be:

import { t } from "@lingui/macro";

export const Courses = [
  {
    id: 0,
    name: () => t`Unlock the secrets of Open Science.`,
    description: () => t`A beginner-friendly course to introduce the concepts and practices of Open Science.`,
    icon: Github,
  },
  {
    id: 2,
    name: () => t`Your Open Science Journey Begins Here.`,
    description: () => t`Learn the basics of Open Science and start your journey towards more open and transparent research and education.`,
    icon: JavaScript,
  },
];


{Courses.map(({ id, name, icon, description }) => (
  <div key={id} className="courses-section__container-course">
    <div className="courses-section__container-course__icon-content">
      <img
        src={icon}
        className="courses-section__container-course__icon-content-icon"
        alt={`${name} icon`}
      />
    </div>
    <h3 className="courses-section__container-course__name">
   {name()}
    </h3>
    <p className="courses-section__container-course__description">
      {description()}
    </p>
  </div>
))}

score 0 · Answer 2 · answered Mar 30 '23 at 11:02

Usage of t macro outside of function is not going to work. Solution proposed Elias Schablowski would work, but there is better solution

export const Courses = [
  {
    id: 0,
    name: msg`Unlock the secrets of Open Science.`,
    description: msg`A beginner-friendly course to introduce the concepts and practices of Open Science.`,
    icon: Github,
  },
  {
    id: 2,
    name: msg`Your Open Science Journey Begins Here.`,
    description: msg`Learn the basics of Open Science and start your journey towards more open and transparent research and education.`,
    icon: JavaScript,
  },
];


const {i18n} = useLingui();

{Courses.map(({ id, name, icon, description }) => (
  <div key={id} className="courses-section__container-course">
    <div className="courses-section__container-course__icon-content">
      <img
        src={icon}
        className="courses-section__container-course__icon-content-icon"
        alt={`${name} icon`}
      />
    </div>
    <h3 className="courses-section__container-course__name">
   {i18n._(name)}
    </h3>
    <p className="courses-section__container-course__description">
      {i18n._(description)}
    </p>
  </div>
))}

Docs: https://js-lingui-git-next-lingui.vercel.app/tutorials/react-patterns

Lingui map translated content not showing

2 Answers2