Missing Keys when target="_blank"

[cbaser]

🐛 Bug Report

Hello I am not sure if its bug or I am having an error but I wanted to open this issue maybe some others will need it later on. So my problem is, I am using i18next for my ReactJS project and it loads perfectly when I am using in a single tab. But when I am using target="_blank" and click it, it cannot find any of the keys.

To Reproduce

My Configuration of i18next

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

i18n
    // load translation using http -> see /public/locales
    // learn more: https://github.com/i18next/i18next-http-backend
    .use(Backend)
    // detect user language
    // learn more: https://github.com/i18next/i18next-browser-languageDetector
    .use(LanguageDetector)
    // pass the i18n instance to react-i18next.
    .use(initReactI18next)
    // init i18next
    // for all options read: https://www.i18next.com/overview/configuration-options
    .init({
        fallbackLng: 'de',
        debug: true,
        whitelist:["en","de","tr"],
        interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
        },
        backend: {
            loadPath:'assets/locales/{{lng}}/{{ns}}.json',
            allowMultiLoading:true,
        },
        react:{
            useSuspense:false,
            wait:true
        },
    });

export default i18n;

Expected behavior

A clear and concise description of what you expected to happen.

Loading all the keys as usual

Your Environment

• runtime version: i.e. Google Chrome, ReactJS
• i18next version: i.e. 19.8.4
• os: Linux
• "i18next-browser-languagedetector": "6.0.1", "i18next-http-backend": "1.0.21", "i18next-sync-fs-backend": "1.1.1",

[adrai]

Can you provide a codesandbox example or similar? How does the developer console log look like? Are you using Suspense? if not, are you waiting for the ready flag before rendering?

[cbaser]

I have created a codesandbox example to similar to my application structure. You can find link at here https://codesandbox.io/s/damp-sound-63r06

[adrai]

As suspected in my previous comment: You're not using suspense and are not waiting for i18next to be ready: https://react.i18next.com/latest/withtranslation-hoc#not-using-suspense

https://codesandbox.io/s/patient-darkness-couj4?file=/src/pages/FirstPage/components/FirstPageComponent.js:228-295

[adrai]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

There are many ways to help this project 🙏