i18next::backendConnector fails to parse url

[AndonMitev]

Hello, i do have following structure:

and my i18n config looks like:

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

if (!i18n.isInitialized) {
  i18n.use(Backend).use(LanguageDetector).use(initReactI18next).init({
    lng: 'ja',
    fallbackLng: 'ja',
    debug: true,
  });
}

export default i18n;

The error that i'm facing tho is:
i18next::backendConnector: loading namespace translation for language ja failed TypeError: Failed to parse URL from /locales/ja/translation.json

No idea why is happening is it some race condition or so. JSON file is valid also checked network tab

using [email protected] if that matter.

Additional: I've started noticing this behaviour when i had to translate constant files and not react components. They are translated successfully but still manage to see this error:

I can see that is trying to load the language before being initialized but i assume that expected in order to be iniitialized. This is how translations are loaded in constant files:

import i18n from "../i18n";

i18n.on("loaded", () => {
  updateSec1TextContent();
})

const updateSec1TextContent = () => {
  sec1.title = i18n.t("terms.sec1.text1");
  sec1.content = [
    { subSectionNumber: 1, text: i18n.t("terms.sec1.content.text1") },
    { subSectionNumber: 2, text: i18n.t("terms.sec1.content.text2") },
  ];
};

i dont think there is something suspicious here but no idea why this initial loading is failing :X

[adrai]

You should not initialize i18next yourself in the config file, if you use next-i18next... have a look at: https://github.com/i18next/i18next-http-backend/blob/master/example/next/next-i18next.config.js

[adrai]

That's not for next-i18next

[AndonMitev]

so what is your suggestion, provide inline translation resources and using t function in constant files somehow?

[adrai]

The question is why do you need constant translation at all?
Normally for next.js the translations should depend on an incoming request (for example to detect the correct language etc.)
So maybe first explain (or show in a real example) what you want to achieve and why...

[adrai]

fyi:
#2079 (comment)
#2171

[AndonMitev]

Ok. thanks to you comment i did some adjustments and now is working:

Changes:

1. Languages are imported locally:

  en: {
          translation: {
            ...en,
          },
        },
        ja: {
          translation: {
            ...ja,
          },
        },

2. Importing import { t } from 'i18next' instead of the created instance seems to work

[AndonMitev]

Thanks @adrai !