I can't load multiple JSON files

[setrejopalace]

Hi, I have been looking for ways to configure multiple .JSON files, but I have not been able to make it work.

My structure:

Folder structure

├── public
    ├── locales
        ├── en
            ├── file1.json
            ├── file2.json
        ├── es
            ├── file1.json
            ├── file2.json
        ├── pt
            ├── file1.json
            ├── file2.json

My code:

i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng,
        debug: true,
        whitelist: availableLanguages,
        interpolation: {
            escapeValue: false
        },
        react: {
            useSuspense: false
        }, 
        backend: {
            loadPath: '/public/locales/{{lng}}/{{ns}}.json'
        }
    });

Used code:

import { withTranslation } from 'react-i18next';

const PageTest = (props) => {

    const { t } = props;

    return(
        <Layout title = "Testa Page Title">
            <h1>
                { t('TEST.TXT1') } 
            </h1>
        </Layout>
    );
}

export default withTranslation()(PageTest);

But it generates the following error: GET http://localhost:5000/public/locales/en/translation.json 404 (Not Found)

And: i18next::backendConnector: loading namespace translation for language pt failed failed loading /public/locales/pt/translation.json

[jamuhl]

Reading the documentation might help: https://react.i18next.com/latest/withtranslation-hoc#loading-namespaces

[setrejopalace]

Reading the documentation might help: https://react.i18next.com/latest/withtranslation-hoc#loading-namespaces

Thank you @jamuhl, this solve my problem.

For help purposes the solution was:

import { withTranslation } from 'react-i18next';

const PageTest = (props) => {

    const { t } = props;

    return(
        <Layout>
            <h1>
                { t('TEST2.TXT') } 
            </h1>
        </Layout>        
    );
}

export default withTranslation('file2')(PageTest);

My best regards for all

[jamuhl]

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.

If you liked my support / work - I would enjoy a coffee sponsored using the “:purple_heart:Sponsor Button”.

There are many ways to help this project :pray:

[setrejopalace]

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.

If you liked my support / work - I would enjoy a coffee sponsored using the “Sponsor Button”.

There are many ways to help this project

Thank you, with pleasure

[kevin-guzman]

I have the same issue after build my react application, any idea?

[jamuhl]

@kevin-guzman check if you can load the files by typing their path in the browser addressbar -> most time the issue is not related to i18next but to having the translation files not where they should be or no server route making them available...