CODEWITHSUNDEEP
reactjsi18nextreact-i18next
Martina Carter
Martina Carter

Reputation: 419

i18next not loading in file from public folder

I am trying to load multiple translation files to react app. So far, I've been able to seperate the files was having issues with it trying to append the name of two different translations file -- /locales/{{lng}}/{{ns}}.json?lng=en+es&ns=translation1+translation2)

I have solved this but now it will not read from the public folder

my config file looks like the following

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import Http from 'i18next-http-backend'
import { initReactI18next } from 'react-i18next'
import BackendAdapter from 'i18next-multiload-backend-adapter'

const languages = ['en', 'es']

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    defaultNS: 'menus',
    fallbackLng: 'en',
    debug: true,
    whitelist: languages,
    lng: 'en',

    backend: {
      backends:[
        new BackEndAdapter(null, {
          backend: new Http(null,{
            loadPath: `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`,
            addPath: `${process.env.PUBLIC_URL}/locales/add/{{lng}}/{{ns}}`,
            allowMultiLoading: true
          })
        })
      ]    
    },

    interpolation: {
      escapeValue: false
    }
  })

export default i18n

package.json

{
   "i18next": "^19.5.1",
   "i18next-http-backend": "^1.0.15",
   "i18next-multiload-backend-adapter": "^1.0.0"
}

using this as reference as to why multiload adapter is needed

Upvotes: 1

Views: 3191

Answers (1)

felixmosh
felixmosh

Reputation: 35573

It should look like this:

import i18n from 'i18next';
import HttpBackend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';

const languages = ['en', 'es'];

i18n
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    defaultNS: 'menus',
    fallbackLng: 'en',
    debug: true,
    whitelist: languages,
    lng: 'en',

    backend: {
      loadPath: `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`,
      addPath: `${process.env.PUBLIC_URL}/locales/add/{{lng}}/{{ns}}`,
    },

    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

Upvotes: 1

Related Questions