Translations in component libraries

Hello,

I’m facing a conundrum trying to figure our how to generate and use translations in a component library in my other applications.

The documentation on how to do translations in DHIS2 states that you have to import:
import ‘./locales/index.js’
In your root app component to make the translations available.

However in the component library I have I don’t really have a root component.

So far I have been able to get the app platform to generate the translation files by running yarn start (which then fails because there is no starting component). However even after translating the resulting files and deploying the package to npm, the translations do not show when they are used in other libraries. I have tried both including or excluding the import of ./locales/index.js in the components themselves but no success either way. I am using rollup to create the package from the component library.

Any help much appreciated!

1 Like

Thanks @plinnegan! I believe the docs you are referring to is: How to add translation support to an application | DHIS2 Developer Portal . I have reposted your post, thanks for your patience!

Hi @plinnegan

One of the suggestions I could give at this stage to debug/understand the problem is to look at our component library @DHIS2/UI. Some of the components use i18n internally as well on the component level. One of these is the sharing dialog

This could be a good point to see how it’s implemented in the UI library, or maybe you can import the library into your application and see how it functions.

The next step would be to check if the locales/index.js file in your component package is correctly importing the json translation files, adding them to i18n, and then exporting i18n again (basically, the compare the locales/index.js in your package with the locales/index.js in one of the DHIS2 components in @dhis2/ui package)

2 Likes

This is great! Thanks @Rene and @Gassim, I’ll have a look at the dhis2/ui repo for ideas.

2 Likes

Great! Don’t hesitate to post any further questions here if you have further questions, and if this solves it for you do mark the solution here!

2 Likes

Still not working unfortunately, perhaps because the build process for my package is different to the DHIS2 UI library. My locales/index.js is the same pattern as what I’m seeing in the sharing dialogue and the translations.json file for french does have the translated values from fr.po as expected. I’ll leave another update if anything changes!

In the mean time I was wondering if you could explain this in a bit more detail from the dev docs:

  • The i18n.t() translation lookup needs to happen at render time.

I saw that when I defined my i18n translation strings in a const file under a variable eg myTranslations, then imported this into my component and passed myTranslations as a prop, the translations did not show. But when I passed the i18n strings directly as props the translations worked. Wondering if that is expected and if so is it due to the line quoted above from the docs.

Hi Pete! It seems like it should be working if your index.js is correctly set up and is loading the translations :thinking:.

We discussed this internally a bit. Some suggestions for things you might try are:

  • explicitly declaring the component locales files as “sideEffects” in package.json (see for example here) to make sure that they are do not get dropped in tree shaking.
  • inspecting the i18n object within your app (and verifying that the translations for the component are correctly loaded) (I think they should be under i18n.store.data.default)
  • building with the app platform instead of with Rollup directly (as app platform uses Rollup under the hood)

As for that documentation, Viktor wrote that text and he’s no longer with DHIS2, so I’m not sure exactly what he meant, but I would guess that it was just meant to indicate that the translation happens at render time (e.g. not at build time) so the translations must be loaded in i18n when using the app so that translations will be rendered (see for example a similar point in the i18next documentation useTranslation (hook) - react-i18next documentation).

I’m not sure if I follow exactly how you were loading myTranslations vs loading the strings. Any documented method for adding resources for i18next should work; if you think that’s not the case, let us know.

Sorry that this is proving to be a bit of a headache! Let us know how it goes, and if you’re still running into issues, we can try some other trouble shooting approach.

3 Likes

Hi Tom and team!

Thanks for the time and thought that’s gone into this! I’ll try and have a look into these suggestions as soon as I can get some time!

Many many thanks!

1 Like