Trans Component namespace

[kkalkhoff]

Describe the bug
When using Trans component in conjunction with useTranslation hook namespace set in hook is not used for translation inside component.

const [t] = useTranslation('ns');
<Trans t={t} i18nKey="some.key">
Placeholder
</Trans>

Deducting from debug info Trans component use translation namespace instead of ns. When I explicitly specify namespace in key it works as intended (<Trans i18nKey="ns:some.key">...) as well as when namespace is declared through ns="ns" prop, but from what I can remember using t namespace worked before.

Occurs in react-i18next version
v10.11.0

[jamuhl]

expected...there is no way to sync them...at least I got no idea how to do so

[kkalkhoff]

@jamuhl Hey, thanks for the reply!

I'm pretty sure that worked before, but I couldn't pinpoint the specific version.

To clarify what is the expected behavior. When using Trans component like this:

const [t] = useTranslation('my_namespace');
<Trans t={t} i18nKey="key1.key2">
Placeholder
</Trans>

My Trans Component was parsed using string from my_namespace:key1.key2.
In other words it was somehow (abstractedly speaking) equivalent to

const [t] = useTranslation('my_namespace');
t('key1.key2')
// Which is equivalent to calling
i18n.t('my_namespace:key1.key2')

I've used this in many places in my project and yesterday after updating packages I found out that it doesn't work anymore. So I'm guessing some changes in recent versions of either i18next or react-i18next alternated Trans component behavior in that matter.

So regarding your answer, it is not about synchronizing them it's about using t (with specific namespace bound to it) from hook to parse i18nKey prop inside Trans component.

[jamuhl]

like said...does not work anymore...not with hooks...

used to work with HOCs doing some nasty double usage of context provider -> so as this does not work with hooks we decided we need to drop the behaviour...

So like you showed either pass t down to Trans or set the namespace explicitely

[kachkaev]

I also experience this issue. With react-i18next@10.9.1 or react-i18next@10.10.0 passing t={t} to Trans changes it default namespace, so translation works as expected. After upgrading to react-i18next@10.11.0 Trans works as if the t prop was not defined at all. So the only solution for the latest version is to use a verbose i18nKey. Looks like a regression.

[jamuhl]

@kachkaev more a design decision...v9 had a very ugly way of being a context consumer and provider the same time - so t get passed from the HOC to below Trans component...

the useTranslation hook can't be a Provider so the only way is to be explicit on the Trans component or creating a own Wrapper

[kachkaev]

In any case, there seems to be a breaking change between react-i18next@10.10.0 and react-i18next@10.11.0, which is not expected. Your advice fully only works in 10.10.0

So like you showed either pass t down to Trans or set the namespace explicitely

// works in 10.10.0 and below
const { t } = useTranslation('my-namespace')
return <Trans t={t} i18nKey="blah" />

// works in any 10.*
return <Trans i18nKey="my-namespace:blah" />

[jamuhl]

@kachkaev you're right 10.11.0 introduced https://github.com/i18next/react-i18next/blob/v10.11.0/src/Trans.js#L216 which obviously is breaking the behaviour...will provide a fix later today.

[jamuhl]

@kachkaev should be fixed in react-i18next@10.11.1

[shawnbissell]

Trans component documentation should be updated to show t function being passed as a prop. I spent many hours trying to debug a missing namespace only to find all the examples in the documentation are wrong and there is no mention of having to pass the t prop for namespaces to work correctly.

[jamuhl]

You only need to set namespace if not using default namespace...there is no need to pass t if either used use(initReactI18next) or I18nextProvider

[felixmosh]

I'm on latest version (10.11.4) and my Trans component looking for a the default ns instead the one that is specified in withTranslation('otherNS').
It this #867 (comment) fix should fix it?

[jamuhl]

It fixes by taking the passed in t function ... not by magically pass the one from withTranslation to the Trans component.