React-i18next: Loading translation messages from the api called twice on page loading

[sivabalan02]

Hi

I am loading the translation messages from the api. But when i am loading the app on the browser my language api was called twice. I didn't know why.

My package version details

    "i18next": "^11.3.2",
    "i18next-xhr-backend": "^1.5.1",
    "jquery": "^3.3.1",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-i18next": "^7.7.0",

index.js

import React                 from 'react';
import ReactDOM              from 'react-dom';
import { I18nextProvider }   from 'react-i18next';

import registerServiceWorker from './registerServiceWorker';
import i18n                  from './shared/plugins/i18n';
import App                   from './App';

ReactDOM.render(
    <I18nextProvider i18n={ i18n }>
        <App />
    </I18nextProvider>, document.getElementById('root'));
registerServiceWorker();

app.js

import React, { Component }     from 'react';
import { Route, BrowserRouter } from 'react-router-dom';
import { translate, Trans }     from 'react-i18next';

class App extends Component {
}

// extended main view with translate hoc
export default translate('translations')(App);

i18n.js
```
import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';
import * as environment from '../../environment/index';

i18n.use(XHR)
.init({
backend: {
loadPath : environment.api_url + 'v1/languages/{{lng}}/2',
allowMultiLoading: false,
crossDomain : false
},
fallbackLng: 'en',
debug: false,
react: {
wait: true
}
}, (error, t) => {
if(error)
console.error(error);
});

export default i18n;
````

when i change this line export default translate('translations')(App); as export default App; in app.js the api load one time, but translation doesn't work.

Here options 2 and get 2 was called twice

[jamuhl]

for what languages are the downloads - if configured like is: If you open your site in en-US it will download en-US and en as your fallback language.

setting eg. load: 'languageOnly' on init will result in only downloading en

[jamuhl]

you might set debug: true on init to see what gets loaded

[sivabalan02]

@jamuhl Thanks for the reply Its downloads only "en" language http://localhost:8000/v1/languages/en/2

[jamuhl]

Ah i see. Defaults for namespace are "translation" -> see ns, defaultNS https://www.i18next.com/overview/configuration-options#languages-namespaces-resources

So it loads 'translation' and 'translations' which both load 2 as your load route does not use {{ns}} but only {{lng}} and hardcoded 2 for namespace

[sivabalan02]

@jamuhl Thanks now i changed the i18n init like this

i18n.use(XHR)
    .init({
        backend: {
            loadPath         : environment.api_url + 'v1/languages/{{lng}}/{{ns}}',
            allowMultiLoading: false,
            crossDomain      : false
        },
        fallbackLng: 'en',
        ns: '2',
        defaultNS: '2',
        debug: false,
        react: {
            wait: true
        }
    }, (error, t) => {
        if(error)
            console.error(error);
    });

export default i18n;

Now its loading v1/languages/en/2 then v1/languages/en/translations

[jamuhl]

ok that's right: 2 is loaded based on ns: '2' and translations from the HOC...right?

[sivabalan02]

@jamuhl Yes. is this the way it works or its an bug?

[jamuhl]

okey ... so i'm closing this ... if there is anything else - let me know

[sivabalan02]

@jamuhl Why its calling two times. My ns value was 2 first time its call with this value but next its automatically overrides the ns value as translations and call the api. Is this is not a bug?. Because i am not getting desired output. Sorry i didn't mean to blame you guys. I just want to know it. Or any other ways to do it with namespace?

[jamuhl]

just make defaultNS: 'translations' and ns: 'translations' - your HOC has translations as default namespace so it will only load that.

As long you have defined you like to have the 2 and translations namespace (file) loaded it loads those...

First time you hardcoded out the {{ns}} variable from your loadPath - still i18next call for the namespaces it get from you - it will not check if there is no {{ns}} variable -> as you hardcode that to '2' just don't use other namespaces than '2'

[stanislav-malchev]

I have the same bug.

import i18n from "i18next";
import backend from "i18next-xhr-backend";
import {reactI18nextModule} from "react-i18next";

i18n
    .use(backend)
    .use(reactI18nextModule) // passes i18n down to react-i18next
    .init({
        fallbackLng: 'en',
        debug: false,
        lng: locale,
        // resources,
        backend: {
            allowMultiLoading: false,
            loadPath: '/ipos.eu/branches/symfony/public/{{lng}}/account/api/translate/{{ns}}',
        },
        ns: ['category', 'messages'],
        defaultNS: 'category',
        keySeparator: ".",
        interpolation: {
            escapeValue: false,
        },
        load: 'languageOnly',
        react: {
            wait: true
        }
    }, (err, t) => {
        i18n.t('key1'); // key in moduleA namespace (defined default)
        i18n.t('category:key1'); // key in common namespace
    });

export default i18n;

I get the files called twice.

[jamuhl]

@stanislav-malchev please provide a reproducable codesandbox

[stanislav-malchev]

I found the cause:
The current locale was different than the fallback locale. So it looked for each namespace for each locale.
I set the fallback to false and it only looked for the current language.
So it wasn't a bug. It was only my error.
I hope this is helpful to someone.