React-i18next: Make an alternative to use translation without any HOC or components.

[stefensuhat]

[jamuhl]

Could you explain more what you need?

You already got the i18next instance - https://github.com/i18next/react-i18next/blob/master/example/webpack2/app/i18n.js

You can import that anywhere and directly call i18n.t(...) https://www.i18next.com/essentials.html

the HOC just asserts the translation files get loaded (if using a backend and not bundling translations with your client) and passes down the t function - plus rerenders your content on calling i18n.changeLanguage().

[stefensuhat]

@jamuhl my bad I thought this package not support to take the language on regular function. will try 18n.t(...) this for sure.

Thanks!.

[jamuhl]

great....if there is anything else...just let me know....here to help.

[stefensuhat]

@jamuhl I keep getting i18next::translator: missingKey undefined auth register register.

my setup:

import i18n from 'i18next';
// import Cache from 'i18next-localstorage-cache';
import XHR from 'i18next-xhr-backend';

i18n
    .use(XHR)
    // .use(Cache)
    // .use(LanguageDetector)
    .init({
        fallbackLng: 'en',
        // wait: true, // globally set to wait for loaded translations in translate hoc

        // backend: {
        //     loadPath: './locales/{{lng}}/{{ns}}.json',
        // },

        // have a common namespace used around the full app
        ns: ['common', 'auth'],
        defaultNS: 'common',

        debug: true,

        // cache: {
        //   enabled: true
        // },

        interpolation: {
            escapeValue: false, // not needed for react!!
            formatSeparator: ',',
            format(value, format, lng) {
                if (format === 'uppercase') return value.toUpperCase();
                return value;
            },
        },
    });


export default i18n;

I call it i18n.t('auth:register')

and I already make sure there is en on my locales folder and auth.json file.

Any additional setup?

Thanks

[jamuhl]

if you do not let the languageDetector detect current user language you will need to set that:

i18n
    .use(XHR)
    // .use(Cache)
    // .use(LanguageDetector)
    .init({
        lng: 'de', // or whatever the lng of user is / or .use(LanguageDetector)
        fallbackLng: 'en',

[stefensuhat]

@jamuhl still not working

i18next::translator: missingKey id auth register register

what the folder structures should look like?. Right now mine looks like this. the i18n.js inside src folder.

[jamuhl]

what is your language you set: i18next::translator: missingKey id auth register register -> says your language is id

[stefensuhat]

@jamuhl id is my default language. inside my locales folder there is id folder and auth.json.

[jamuhl]

do you get any console logs from i18next:backend saying failed loading namespace auth for langauge id?!?

Also as loading is async make sure you render after loading of translations is done (basically what the translate hoc does)

[stefensuhat]

console.log doesnt show any error. and no console.log from xhr

I've load my provider here:

ReactDOM.render(
    <CookiesProvider>
        <I18nextProvider i18n={ i18n }>
            <MuiThemeProvider muiTheme={getMuiTheme(materialTheme())}>
                <Provider store={store}>
                    <App />
                </Provider>
            </MuiThemeProvider>
        </I18nextProvider>
    </CookiesProvider>,
    document.getElementById('app'),
);

[jamuhl]

it's not an error just an info. if there is .use(XHR) it really should show success or failed info if debug is set to true

[stefensuhat]

I found the culprit. My code is working. the problem is PHPstorm always make comment above any created file, and that's make the .json become fail to parse.

I need to add this

    .use(XHR)
    // .use(Cache)
    // .use(LanguageDetector)
    .init({
        fallbackLng: 'en',
        lng: 'id',
        // wait: true, // globally set to wait for loaded translations in translate hoc

        // backend: {
        //     loadPath: 'locales/{{lng}}/{{ns}}.json',
        // },

        // addPath: 'locales/add/{{lng}}/{{ns}}',

        // have a common namespace used around the full app
        ns: ['common', 'auth'],
        defaultNS: 'common',

        debug: true,

        // cache: {
        //   enabled: true
        // },

        interpolation: {
            escapeValue: false, // not needed for react!!
            formatSeparator: ',',
            format(value, format, lng) {
                if (format === 'uppercase') return value.toUpperCase();
                return value;
            },
        },
    }, (err, t) => {
        if (err) return console.log('something went wrong loading', err);
        t('key'); // -> same as i18next.t
    });

maybe you can add to docs put (err,t) to trace the error easily. I got the error from those.

Thanks for your help! really grateful!

[jamuhl]

did you not get any warning about that from the backend: https://github.com/i18next/i18next-xhr-backend/blob/master/src/index.js#L58 there should be warning if not able to parse the json...

[stefensuhat]

yes I got the warning after I put

 (err, t) => {
        if (err) return console.log('something went wrong loading', err);
        t('key'); // -> same as i18next.t
    });

before that it doesn't show any warning.

[jamuhl]

hm...will need to check that...should really show that. Never mind. Glad you figured out.