React-i18next: Failed to fetch error is thrown in console on languageChange but on refresh works fine.

[sagarCS]

Hey Folks,
I need your help with react i18next changeLanguage the problem is when i load my app the the selected language load properly when i change it to some other language it throws something like this in chrome console :-

build.umd.js:335 i18next::backendConnector: loading namespace translation for language es failed TypeError: Failed to fetch

but if i refresh again it load the language selected properly Dont know whats the problem here
Please Take look at my file below and provide your insights

here is my config and other details :-

my i18n.js file:

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
const languages = ['en', 'es', 'fr']

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
    fallbackLng: 'en',
    debug: true,
    whitelist: languages,

    interpolation: {
      escapeValue: false
    }
  })

export default i18n

my /locales/es/translatio.json file:-

{
    "common": {
        "buttons": {
            "save": "Salvar",
            "cancel": "Cancelar",
            "add": "Añadir"
        },
        "Table": {
            "tableName": "NOMBRE",
            "tableDescription": "DESCRIPCIÓN",
            "tableLastModified": "ÚLTIMA MODIFICACIÓN"
        },
        "search": "Buscar"
    },
    "features": {
        "Roles": {
            "name": "Nombre",
            "description": "Descripción",
            "permissions": "PERMISOS"
        }
    }
}

my index.js file:

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from './app/configureStore'
import App from './app/App'
import './app/i18n'

const ReduxStore = configureStore()

ReactDOM.render(
  <Provider store={ReduxStore}>
    <Suspense fallback={<div>Loading...............</div>}>
      <App />
    </Suspense>
  </Provider>,
  document.getElementById('root')
)

my Component File where i used translation function :-

import React from 'react'
import { withTranslation } from 'react-i18next'

export class Roles extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
  }

  render() {
    const { t, i18n } = this.props
     return (
       <React.Fragment>
          <div>
            <label htmlFor="locale">Choose a Language:</label>
            <select onChange={(evt: any) => i18n.changeLanguage(evt.target.value)}>
              <option
                value="en"
                selected={window.localStorage.getItem('i18nextLng') === 'en' ? true : false}
              >
                English
              </option>
              <option
                value="es"
                selected={window.localStorage.getItem('i18nextLng') === 'es' ? true : false}
              >
                Spanish
              </option>
              <option
                value="fr"
                selected={window.localStorage.getItem('i18nextLng') === 'fr' ? true : false}
              >
                French
              </option>
            </select>
          </div>
        </React.Fragment>

Please take some time and provide some insight of your or Suggestion are welcome.
Thanks you

[adrai]

Can you create a codesandbox example or similar?

[sagarCS]

hey @adrai thanks for the reply but its quite not possible to prepare codesand box for the project i am working as its quite large application there are like thousand of files and component that are connected to each other.......so thats why i provide the files that are necessary for using react i18next. if you can take a look at the code i provided it is followed from the docs only so can you take a look if something is missing will really appreciate.

[adrai]

Can’t reproduce it...
Can you try to adapt a codesandbox example like: https://codesandbox.io/embed/reactusinghooks-jjw9y44195?codemirror=1

[sagarCS]

if i create codesandbox and try the basic it works fine but its not working in my application that i am working its huge application and i have just sent the code related to i18next from the files i have used in........can you tell me the code is correct above or there is some mistake somewhere?.

[adrai]

@sagarCS based on what I see it's correct... but I can only judge the i18next related code...
I have no experience with redux...
It's really difficult to say, without having a running example... sorry, you need to debug yourself

[sagarCS]

you can ignore the redux for this case as i18next doest not get effect with Redux as far as i know
Actually when i create locales folder inside public folder then i18next does not locate the json file automatically i had to provide loadpath in backend field and when i directly create locales folder it gets detected automatically without providing the locales folder path in loadpath field.....if folder location was the issue then on Refreshing the page it should have thrown error like "namespace failed to load" but its loading the file on refresh the problem occurs on changing the language

[adrai]

Can you send a screenshot of the network tab?
How des the xhr request/response to fetch the language look like?

[sagarCS]

this is console Screenshot when first time page load with english langugage selected

this is network tab Screen shot for the same above:

This is console Screenshot when Change to Spanish Language (look at the yellow line in Console):

this is network tab for same above(spanish):

[adrai]

Seems you are getting a certificate error when requesting the spanish translations...
https://localhost... The browser can’t verify the ssl certificate...
Are you getting this also when fetching the first translations?
I assume if you run your app with a valid certificate or on http it will work...
So this seems not an issue of i18next in my eyes.

[sagarCS]

ohk let me add the certificate in the authorities section of chrome and will let you know if it worked or not....thanks though

[sagarCS]

@adrai You got it Right brother....it was ssl certificate issue, I added certificate in chrome authorities and now its working Properly...
Thanks a lot for your time and efforts really appreciate your help
I will close this issue now thanks once again

[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 🙏