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.
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)
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 .
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.
.