How to translate global constant js file with multiple export const?

[tmarcus68]

I'm trying to dynamic translate my GlobalConstant.js which is not a component or function. I understand that I've to use an API event listener to dynamic changes but I am not sure how should I implement it into my code. Also, I can't even show the default en text.

Any advice is appreciated. TIA

Sample of the API event listener

i18next.on('languageChanged init', () => {
    // what to put here?
});

Code as below

i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';

i18n
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(HttpApi)
  .init({
    supportedLngs: ['en', 'jp'],
    fallbackLng: 'en',
    detection: {
      order: ['cookie', 'htmlTag', 'localStorage', 'path', 'subdomain'],
      caches: ['cookie'],
    },
    backend: {
      loadPath: '/assets/locales/{{lng}}/translation.json',
    },
    debug: true,
  });

export default i18n;

en/translation.json

{
"firstName": "First Name"
// other codes...
}

jp/translation.json

{
"firstName": "名"
// other codes...
}

GlobalConstant.js

import i18n from '../i18n';

export const label = [
  {
    index: 0,
    name: 'firstName',
    label: i18n.t('firstName')
  },
  {
    index: 1,
    name: 'lastName',
    label: i18n.t('lastName')
  },
];

export const month = [
  i18n.t('jan')
  i18n.t('feb')
  i18n.t('mar')
  i18n.t('apr')
  i18n.t('may')
  i18n.t('jun')
  i18n.t('jul')
  i18n.t('aug')
  i18n.t('sep')
  i18n.t('oct')
  i18n.t('nov')
  i18n.t('dec')
];

Component.js

import * as Constants from '../../utils/GlobalConstant";

export function Component() {
let namingLabel = [];

// other codes...

namingLabel.push(Constants.label);

// other codes...
}

Errors

i18next: hasLoadedNamespace: i18next was not initialized undefined
i18next.js:22 i18next::translator: key "firstName" for languages "en" won't get resolved as namespace "translation" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!
i18next::translator: missingKey undefined translation firstName firstName

On the front end it will just show "firstName" instead of "First Name"

[jamuhl]

#1306

[jamuhl]

#1236 (comment)

[jamuhl]

or #909 (comment)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.