Next-i18next: withNamespaces doesnt work with multiple name spaces

[mohitmayank]

Describe the bug

withNamespaces doesnt work with multiple name spaces

withNamespaces('common', 'footer')(Footer); 
//only common namesapce is avaialable

Occurs in next-i18next version

0.32.1

Steps to reproduce

withNamespaces('common', 'footer')(Footer);

Expected behaviour

It should load both the namespaces

[jamuhl]

withNamespaces(['common', 'footer'])(Footer); if multiple pass in multiple as array (at least - that's how it works in react-i18next - so i guess API is the same)

[mohitmayank]

i have tried that as well. but now i figured i can use 'namespace:key'.
closing this.

[isaachinman]

Yes, the API is identical.

[remyzv]

Found this closed but i'm facing the exact same issue, loading multiple namespace like withNamespaces(['common', 'footer'])(Footer); is not working.

I'm forced to use the 'namespace:key' . Why is it not working ?

[isaachinman]

@remyzv That's just how react-i18next works. How would you expect it to know which namespaces you are referring to, when there are multiple? Am I misunderstanding your question?

[jamuhl]

@remyzv the first namespace in array will become default, so:

t('common:key') === t('key')

the second namespace is only accessible by t('footer:key')

[remyzv]

@isaachinman yes you're right, it could not be possible to define which namespace to use.
@jamuhl thanks also for your answer.

I have a last issue, i'm trying to translate strings into a simple const like this :

import { i18n } from '../../../config/i18n';
const checkboxes = [
    {
        name: i18n.t('form:FILTERS.TIPS.STATUS.OPEN'),
    },
    {
        name: i18n.t('form:FILTERS.TIPS.STATUS.IN_PROGRESS'),
    },
    {
        name: i18n.t('form:FILTERS.TIPS.STATUS.FINISHED'),
    },
];
export default checkboxes;

But the strings are not translated, am I using it wrong ?

thanks a lot guys, your work is awesome.

[isaachinman]

@remyzv What is config/i18n? There is no i18n object which can safely provide translations in both client and server contexts. You need to follow the documentation. Please use withNamespaces.

[remyzv]

@isaachinman it's the config file

const NextI18Next = require('next-i18next/dist/commonjs');

module.exports = new NextI18Next({
    defaultLanguage: 'fr',
    otherLanguages: ['en'],
    defaultNS: 'common',
    fallbackLng: {
        'fr-FR': ['fr'],
        'fr-Fr': ['fr'],
        default: ['fr'],
    },
    localePath: 'src/static/locales',
});

I thought I could use t function from i18n object. Is it possible to use HOC on a simple const ? I'm sorry if my questions are a bit stupid

[isaachinman]

I thought I could use t function from i18n object

No, you cannot. In the SSR context, the localisation comes off req.i18n. Feel free to search the issues of this repo for similar questions.

Is it possible to use HOC on a simple const

HOCs are for React components. Just put your checkboxes logic inside the component.