github pages not loading file from server in deployed React App

Question

I have deployed a react project to github and when viewing it with github pages . I'm using i18next for different translations for my web app . When I run my app through localhost the locales folder is accesed and translates the content of my app properly . However when deployed with github pages I get the errors :

WARNING:

i18next::backendConnector: loading namespace translation for language en failed failed loading /locales/en/translation.json

ERROR :

request.js:60 GET https://user.github.io/locales/en/translation.json 404

So I cannot access my translations inside my locales folder .

My folder structure (I have folder inside for more langs other than english in same level ) : public > locales > en > translation.json

the i18next.js from the docs located in :

src > i18n.js 

with code :

import i18n from 'i18next'; 
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
// don't want to use this?
// have a look at the Quick start guide 
// for passing in lng and translations on init

const Languages = ['en' , 'gr']; //the languages I want 


i18n
  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/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: 'en',
    debug: true,
    whitelist:Languages,

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }


  });


export default i18n;

I would appreciate your help

Answer 1

For deploying on gh-pages you need to adapt the loadPath where the json are hosted check this

Hope this work!