Problem with path to my translation file after deploying react app to GitHub pages

Question

I am struggling to make my website work properly. My site is a react + vite using i18next.js library to translate texts. App is hosted on GitHub pages, I am also using my custom domain name. The issue is Failed to load resource: the server responded with a status of 404 () indicating my path must be wrong. I tried to change the path like 10 times already trying different options. Examples:

 loadPath: "{{lng}}.json",
loadPath: `${domain}/translations/{{lng}}.json`,
  loadPath: "/translations/{{lng}}.json",

etc but nothing seem to work.

My translations in development build are located under /src/translations/(nameofMyfiles).json

This is my i18n.js 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) // passes i18n down to react-i18next
  .init({
    lng: "pl",
    backend: {
      loadPath: "/translations/{{lng}}.json",
    },
    fallbackLng: "pl",
    debug: false,
    interpolation: {
      escapeValue: false,
    },
    react: { wait: true },
  });

export default i18n;

Answer 1

Alright, after many battles problem is solved. I changed the approach and just refactored my folder structure and names. I also deleted completely the path because completely wrong way to solve the problem. Instead I just added resources object and it works both in dev and publishing mode.

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

import common_pl from "./translations/pl/common.json";
import common_en from "./translations/en/common.json";

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    lng: "pl",
    resources: {
      pl: {
        common: common_pl,
      },
      en: {
        common: common_en,
      },
    },
    ns: ["common"],

    fallbackLng: "pl",
    debug: true,
    interpolation: {
      escapeValue: false,
    },
    react: { wait: true },
  });

export default i18n;