Use lingui.js with multiple packages

Hey, four our frontend we are using monrepository architecture. We have split codebase per application and library (ui, utils…).

So, now we want to implement Lingui in our UI package. So we want prepare some React components separately with and then use this components in applications. It works well expect translations. We have installed Lingui in this packages and also works well. Its no problem to compile this library. Library is written in TypeScript and React.

But, after this i want use some component in application. If i paster msgid with translation directly into application po file also everything works good and component is translated. But after this i want to run lingui extract for example because i added some another translation to app. But msgid used in external component is not found and its marked as unused and commented.

I know Lingui searching components only in defined paths, but its possible to force Lingui to extract this translations from another package/node_modules folder etc?

Out current configuration

{
  "fallbackLocales": {
    "default": "en"
  },
  "sourceLocale": "en",
  "format": "po",
  "locales": ["en", "cs", "es"],
  "catalogs": [
    {
        path: "src/locales/{locale}/messages",
        include: [
            "<rootDir>/src/**/*"
        ]
    }
  ],
}

[semoal]

This is something I want to explore for a long time, how Lingui works with monorepo of UI’s and how can these translations co-exist together. Will try to get some free time and create a repo where we can play and update Lingui to work nicely with monorepos.

[renchap]

I am having a similar issue: In a monorepo, I have both a web React app, a react-native mobile app, and a shared library with some common code.

I am not sure how to properly handle this, as:

• we have many common strings between the web & mobile apps, so it would be great to only translate them once
• we want to have some strings in the shared library translated
• we do not want to ship mobile-only string into our web-app, and the other way around. Strings in the shared library should be in both

Any ideas?

The best option I am thinking about is extracting strings for each project independently, then importing and merging mobile/locale.js + ``shared/locale.jsin the mobile app, andweb/locale.js+shared/locale.jsin the web app, but strings need to be translated in each project independently as we get 3.po` files.