Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Trans Component namespace #867

Closed
Czahoo opened this issue Jun 10, 2019 · 12 comments
Closed

Trans Component namespace #867

Czahoo opened this issue Jun 10, 2019 · 12 comments

Comments

@Czahoo
Copy link

@Czahoo Czahoo commented Jun 10, 2019

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jun 10, 2019

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

@Czahoo

This comment has been minimized.

Copy link
Author

@Czahoo Czahoo commented Jun 10, 2019

@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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jun 10, 2019

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

This comment has been minimized.

Copy link

@kachkaev kachkaev commented Jun 15, 2019

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jun 15, 2019

@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

This comment has been minimized.

Copy link

@kachkaev kachkaev commented Jun 15, 2019

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jun 16, 2019

@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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jun 16, 2019

@kachkaev should be fixed in react-i18next@10.11.1

@Czahoo Czahoo closed this Jul 3, 2019
@shawnbissell

This comment has been minimized.

Copy link

@shawnbissell shawnbissell commented Jul 18, 2019

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jul 19, 2019

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

This comment has been minimized.

Copy link

@felixmosh felixmosh commented Jul 23, 2019

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jul 23, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.