Translations stop working when sharing between to files (one no-component one)

[ewelinam10]

🐛 Bug Report

Hello, I am facing weird bug. When I share array that contains i.a. translations between two files ( one file with component, second file with service) , those translations stop working. When I remove usage from service, and use only in one file, it is fine. Also it is working when I've change scope of this array by changing declaration from const to var. Maybe is it related to some bundling ?

To Reproduce

animal.component.tsx

export const items = [
  {
    id: 1,
    value: 'cat',
    label: t('animals:cat')
  },
  {
    id: 2,
    value: 'dog',
    label: t('animals:dog')
  }
]
export const Animal: React.VFC = () => {
  return <>{items[0].label}</>
}

animal.service.tsx

export class AnimalService {
  public static getAnimalDetails() {
    //some API request
    return items[0].value
  }
}

Expected behavior

Animal component shows translation for cat

Your Environment

• runtime version: node v16.11.1, chrome v126.0.6478.127
• i18next version: "^21.9.1"
• os: Windows
• i18n configuration : i18n .use(Backend) .use(initReactI18next) .init({ backend: { loadPath: getCoreAPIUrl('xx.json') }, ns: [ 'animals' ], defaultNS: 'common', lng: LanguageCodes.en_US, load: 'currentOnly', fallbackLng: LanguageCodes.en_US, debug: false, interpolation: { escapeValue: false }, react: { useSuspense: false } })

[adrai]

Please provide a minimal reproducible example repository or codesandbox example etc... But looking at your animal.component.tsx code, it seems you are using the t() function outside of a react component? The t function needs to be executed inside a function (normally where the UI is rendered...)

maybe related: https://github.com/i18next/react-i18next/issues/909 https://github.com/i18next/react-i18next/issues/1757