Failed to fetch error is thrown in console on languageChange but on refresh works fine

Question

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/translation.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

error says about namespace error, looks like a typo at your namespace. you posted your path as /locales/es/translatio.json, missing an n at translation. — buzatto
hey @buzatto thanks for the reply...thats not the issue actually file name is correct i miss spell translation while posting this question so its translation.json only. — SAGAR KAMBLE
is locales folder at public folder? It may be related to folder location. — buzatto
i tried both....actually when i create locales folder inside public folder then it 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......Thats why i need help from any of you guys out there. — SAGAR KAMBLE

SAGAR KAMBLE SAGAR KAMBLE · Accepted Answer · 2020-05-18T06:25:18

I found the issue, as it was due to invalid SSL certificate it was blocking the Translation req in network tab so, I added the certificate in the authorities and then it all worked fine.

Failed to fetch error is thrown in console on languageChange but on refresh works fine

1 Answers