Utility Functions Translation does not work after Migrating to @tolgee/react from react-i18next

[amir2mi]

Description

I am currently in the process of migrating our project from react-i18next to @tolgee/react, and while I have been able to integrate most of the functionality based on the official @tolgee/react documentation. I’ve encountered a stumbling block, specifically with translations within utility functions.

The application makes extensive use of utility functions to handle translations, and these are the areas where translations seem to fail. After importing and initializing the Tolgee instance, translations are not being applied when using the tolgee.t() method within these utility functions.

Configuration

The instance creation code is as follows:

// I18nProvider.js
import { Tolgee } from '@tolgee/react';
import { DevTools } from '@tolgee/dev-tools';
import { FormatIcu } from '@tolgee/translation-formatters';

export const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatIcu())
  .init({
    apiKey: process.env.NEXT_PUBLIC_TOLGEE_API_KEY,
    apiUrl: process.env.NEXT_PUBLIC_TOLGEE_API_URL,
    defaultLanguage: "en",
  });

Usage

The translation functions are utilized as depicted below:

// UtilityFunctions.js
import { tolgee } from './I18nProvider';

export const lists = {
    something: tolgee.t('label.intro', { ns: 'general' }),
}

Issue

When calling getLists() from any point within the codebase, the returned string remains untranslated. It is noteworthy that when employing the component or the useTranslate hook directly within React components, the translations operate as expected.

If there is additional information required or further troubleshooting steps that I may undertake, please advise.

[amir2mi]

I just read this:

Tolgee run method will start loading translations data (if necessary) and also activates in-context tools. You can use tolgee without running it (e.g. on server with ssr). That way tolgee won't activate in-context tools and will not load anything asynchronously, but you can still use tolgee.t function with staticData.

The problem can be solved by also defining staticData paths to json files, but having both staticData and api calls for development kind of feels like there might be a better solution.

[stepan662]

Well, you can also wait for translations to be loaded and then start using tolgee.t. But generally I'd recommend not going out of react integration, because then the translations won't be updated automatically and so on. So, easiest thing you can do is to use <T> component in utility functions (that's how we do it).

[amir2mi]

Thanks for the solution. Turning everything into React components might not be the best solution (at least for my project), there are a lot of config files in a project that are plain js/ts and need the translations. I fixed it (as I mentioned), by also providing staticData besides apiUrl and apiKey. This way the first load gets the translation synchronously and after that the new translations will get updated asynchronously by calling the API.