i18next translation outside component

I'm new for i18next, trying to localize/translate website. Everything works for translation inside of component, but outside (means json files with i18n.t() it doesn't retrieve needed information, instead showing default value.

I'm using create-react-app and it's default settings for folders reference, maybe this is the key problem, but I can't find out why and what to change.

import i18n from '../../i18n';
const navigation = [ { 'id' : 'dashboard', 'title' : i18n.t('analytics.title', 'NOT FOUND'), 'type' : 'group', 'icon' : 'apps', } ]
export default navigation;

And here is settings for i18n.js file:

import i18n from "i18next";
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';
import detector from "i18next-browser-languagedetector";
i18n .use(detector) .use(Backend) .use(initReactI18next) .init({ lng: localStorage.getItem('language') || 'en', backend: { /* translation file path */ loadPath: '/assets/i18n/{{ns}}/{{lng}}.json' }, fallbackLng: ['en', 'se', 'da'], debug: true, ns: ['translations'], defaultNS: 'translations', keySeparator: false, interpolation: { escapeValue: false, formatSeparator: ',' }, react: { wait: true } }) export default i18n;

and for index.js:

import 'typeface-muli';
import './react-table-defaults';
import './react-chartjs-2-defaults';
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";
import './styles/index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import App from 'app/App'; ReactDOM.render( <I18nextProvider i18n={i18n}> <App /> </ I18nextProvider> , document.getElementById('root'));
serviceWorker.unregister();

I'm just getting default : 'NOT FOUND'...

2 Answers

You are using a backend service to fetch translations asynchronously in the browser. When importing i18n you probably expected translation to be readily available, but that's not the case - i18n.init is also an async method (if you try and await it, you'll be able to leverage t function).

One possible approach would be defining a translation key:

const navigation = [ { ... 'title_key': 'analytics.title', ... }
]

And later passing it down to t within a component:

navigation.map(({ title_key }) => <li>t(title_key)</li>)

Can only echo what Pavel said. This saves me so much time! Have gone through so many codes such as But didnt work.

Only Pavel's suggestion works! This allow you to still use useTranslation() in components while at the same time importing options from non-components (such as redux store/ )

For example I have something like this at Redux store/ folder:

export const xOptions = [ { value: 'university', label: 'service_types_uni', imgPath: '/university.jpeg', },
];

And import it at components:

import xOptions from '../store/options/manyOptions'
import Card from '../components/Card';
import { useTranslation } from 'react-i18next';
......
const ServicePage = (props) => { const { t } = useTranslation(); return( xOptions.map((option) => ( <Card title={t(`${option.label}`)} /> ) ) )

}

Hope this helps someone too!