react-i18next doesn't translate - reactjs

I have tryed to implement react-i18next to my react application but it doesn't give a f... that I want it to work
Console doesn't show any error. It just doesn't translate.
Anyone had similar problem and can help me figure out why it doesn't translate?
my i18n.js file content:
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translationPL from './translations/pl/common.json';
const resources = {
pl: {
translation: translationPL
}
};
i18n
.use(initReactI18next)
.init({
resources: resources,
lng: "pl",
defaultNS: 'common',
keySeparator: false,
interpolation: {
escapeValue: false
}
});
export default i18n;
then my App.js file
import React from 'react';
import './App.css';
import './i18n';
import { withTranslation } from 'react-i18next';
class App extends React.Component {
.
.
.
render() {
const { t } = this.props;
return (
button className="btn btn-primary" onClick={() => this.endMeeting()}><span className="code-tag">{ t('End meeting') }</span></button>
);
}
}
export default withTranslation('common')(App);
and lastly ./translations/pl/common.json
{
"End meeting": "Zakończ posiedzenie"
}
update
After enabling debug option it gives me this output:
i18next: languageChanged pl
i18next: initialized {debug: true, initImmediate: true, ns: Array(1), defaultNS: "common", fallbackLng: Array(1), …}
i18next::translator: missingKey pl common key_name key_name
i18next::translator: missingKey pl common key_name key_name

Try to add 'ns' param
i18next.init({
ns: ['common', 'moduleA', 'moduleB'],
defaultNS: 'moduleA'
}
in your case
ns: ['common']

Related

i18next missing key but other key was found

I dont understand nothing anymore.
I use i18next and want to access to my key but it does not work.
i18next::translator: missingKey de translation profile profile
i18next::translator: missingKey de translation profile profile
i18next::translator: missingKey de translation profile profile
this is my translation.json
{
"app_name": "Test (NEW DE)",
"profile": "ss"
}
this works:
<Text>{ t('app_name') }</Text>
this not working:
<Text>{ t('profile') }</Text>
can anyone explain me why its not working correctly ?
i18next
import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';
i18next
.use(HttpApi)
.use(LanguageDetector)
.use(initReactI18next)
.init({
react: {
useSuspense: false
},
fallbackLng: 'en',
compatibilityJSON: 'v3',
lng: 'de',
debug: process.env.NODE_ENV === 'development',
backend: {
loadPath: `http://192.168.0.249:4000/public/locales/{{lng}}/translation.json`,
},
interpolation: {
escapeValue: false,
},
keySeparator: '.',
});
export default i18next;
I suspect, you're calling the t function too early and are not waiting for the translations to be fully loaded.
If you're not using suspense: useSuspense: false you need to make sure you check for the ready flag instead.
https://react.i18next.com/latest/usetranslation-hook#not-using-suspense
// additional ready will state if translations are loaded or not
const { t, i18n, ready } = useTranslation('ns1');
https://react.i18next.com/latest/withtranslation-hoc#not-using-suspense
// use tReady prop in MyComponent to check if translations
// are already loaded or not
const ExtendedComponent = withTranslation()(MyComponent);
<ExtendedComponent />

Loading in i18n translations without showing translation ids

I've implemented i18next in my nextjs project, and I'm having the issue, that I can briefly see all the text-id's before the translations get fully loaded. Is there any way to avoid showing these text ID's as it causing a bit of flickering on load? It's especially obvious when refreshing the page quickly.
I have tried different ways with both useSuspense and wait in the config and App file. Currently this is what I have (translation files are located in public/locales/xx/translation.json):
i18n.jsx
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
i18n
.use(Backend)
.use(initReactI18next)
.init({
debug: true,
fallbackLng: 'en',
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
react: {
useSuspense: true
}
});
export default i18n;
Usage:
import { useTranslation } from 'react-i18next';
export default function Text () {
const { t } = useTranslation();
return (<Text>{t('text.string.here')}</Text>)
App
import { Suspense } from 'react'
import i18n from 'components/i18n'
function MyApp({ Component, pageProps }) {
<Suspense fallback="loading">
<Component {...pageProps}/>
</Suspense>
}

react-i18next addResourceBundle is not a function

I'm using react-i18next to internationalize my react app. When I trying to addResourceBundle on each module's config files it throws this error:
TypeError:
i18next__WEBPACK_IMPORTED_MODULE_0__.default.addResourceBundle is not
a function
Therefore, I added i18next.init command before addResourceBundle. Then it works, but show below warning and reset previously selected locale.
i18next: init: i18next is already initialized. You should call init
just once!
This is my i18n.tsx file
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
i18n
.use(Backend)
.use(LanguageDetector)
.use (initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
detection: {
order: ['queryString', 'cookie'],
cache: ['cookie']
},
interpolation: {
escapeValue: false
},
react: {
wait: true,
useSuspense: false,
}
})
export default i18n;
This is my Module's Config file
import i18next from 'i18next';
import { lazy } from 'react';
import en from '../../i18n/dashboard/en';
import si from '../../i18n/dashboard/si';
import ta from '../../i18n/dashboard/ta';
i18next.init({ resources: {} });
i18next.addResourceBundle('en', 'dashboard', en);
i18next.addResourceBundle('si', 'dashboard', si);
i18next.addResourceBundle('ta', 'dashboard', ta);
const DashboardConfig = {
settings: {
layout: {
mode : 'default'
}
},
routes: [
{
path: '/dashboard',
component: lazy(() => import('./Dashboard')),
auth : ['admin', 'user', 'DASHBOARD_VIEW'],
}
]
};
export default DashboardConfig;
it happens, because you are importing i18next in your module instead of created instance in i18n.tsx.
it should be like this:
import i18next from 'path/to/i18n.tsx';

react-i18next: attempted import error: 'withNamespaces' is not exported from 'react-i18next'

I'm currently trying to translate my application with react-i18next and use multiple files for the translation because i want it to be clearly. That's why I wanted to use withNamespaces rather than withTranslation, but when I try to import withNamespaces from 'react-i18next' I get the following error message:
Attempted import error: 'withNamespaces' is not exported from 'react-i18next'.
This is my code:
import React, { Component } from 'react'
import {Link} from 'react-router-dom'
import { withNamespaces } from 'react-i18next'
class Navbar extends Component {
render(){
return (
<>
<ul>
{this.props.items.map(item => (
<li key={item.key}>
<Link to={item.route} className='jb-navbar_menu-item_link' >
{ this.props.t('header:'+item.name)}
</Link>
</li>
))}
</ul>
</>
)
}
}
export default withNamespaces('header')(Navbar)
What am I doing wrong? Am I importing this in a wrong way? Or is there something wrong with my config maybe?
This is my i18n.js:
import i18n from "i18next"
import { initReactI18next } from "react-i18next";
import translationEN from './locales/en/translation.json';
import translationDE from './locales/de/translation.json';
import headerDE from './locales/de/header.json';
import headerEN from './locales/en/header.json';
// the translations
const resources = {
de: {
translation: translationDE,
header: headerDE
},
en: {
translation: translationEN,
header: headerEN
}
};
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
ns:['translation', 'header'],
defaultNS: 'translation',
resources,
lng: "de",
fallbackLng: "de",
keySeparator: false, // we do not use keys in form messages.welcome
interpolation: {
escapeValue: false // react already safes from xss
}
}); // key in common namespace);
i18n.loadNamespaces('header')
export default i18n;
There is most probably a mismatch in your react-i18next version
withNamespaces has been deprecated in V10, you can use withTranslation
instead.
There is a good table in the react-i18next doc showing which components for which version:
https://react.i18next.com/latest/migrating-v9-to-v10

What am I doing wrong with setting up i18next in React? Getting a "i18next::translator: missingKey" error

In my src folder, I made a folder called i18n, and it contains these three files
en.json
es.json
pl.json
This is what they look like:
{
"selectAction": "Select Action",
"workflow": "Workflow",
"details": "Details"
}
In src folder, I also added this file called i18n.js
import i18n from 'i18next'
import LanguageDetector from "i18next-browser-languagedetector"
import { initReactI18next } from 'react-i18next'
// import Backend from "i18next-xhr-backend";
// import XHR from 'i18next-xhr-backend'
import languageEn from './i18n/en.json'
import languageEs from './i18n/es.json'
import languagePl from './i18n/pl.json'
i18n
// .use(Backend)
// .use(XHR)
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources: {
en: languageEn,
es: languageEs,
pl: languagePl
},
lng: "es",
fallbackLng: "en",
debug: true,
keySeparator: ".",
interpolation: {
escapeValue: false,
}
});
console.log(i18n.languages)
export default i18n;
My index.js file in the src root looks like this:
// import statements are omitted, but I am importing I18NextProvider and i18n
ReactDOM.render(
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>
document.getElementById('root')
);
Lastly, somewhere in my App I have this:
// Other imports omitted
import { useTranslation } from 'react-i18next';
const DetailsPlaceholder = () => {
const { t } = useTranslation();
return (
<h4 className="zero-state-section-text">{t('selectAction')}</h4>
);
};
export default DetailsPlaceholder;
When I try to load the page, I see the key 'selectAction' as the text (instead of the real text), and this error gets logged:
i18next::translator: missingKey es translation selectAction selectAction
All resource files should store strings under translation key (like in quick start for react-i18next):
{
"translation": {
"selectAction": "Select Action",
"workflow": "Workflow",
"details": "Details"
}
}
Here is a repository with a reproduced error and fixed configuration:
https://github.com/terales/reproduce-react-i18next-missingkey-error

Resources