react-i18next v10 lazy loading does not work
basslagter opened this issue · 9 comments
Just updated react-i18next to version 10 and after renaming all withNamespaces tot withTranslation I noticed that lazy loading was broken. I created a little sample to reproduce:
const Foo = withTranslation(['foo'])(({ t }: WithTranslation) => {
return (<div>{t('foo:text')}</div>);
});
const Bar = withTranslation(['bar'])(({ t }: WithTranslation) => {
return (<div>{t('bar:text')}</div>);
});
class Test extends React.PureComponent<{}> {
state = {
visible: false,
};
constructor(props: {}) {
super(props);
this.onClick = this.onClick.bind(this);
}
render() {
const { visible } = this.state;
return (
<div>
<button onClick={this.onClick}>Click</button>
{visible ? <Bar/> : <Foo/>}
</div>
);
}
private onClick() {
this.setState({
visible: true,
});
}
}
Now, when running I see the translated text 'foo'. When I click the button it renders the Foo component but I see the translation key 'text' instead. Before, It downloaded the new translation file (foo.json) and translated correctly.
My config looks like:
import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';
i18n
.use(Backend)
.use(initReactI18next)
.init({
lng: 'en',
fallbackLng: 'en',
ns: ['general'],
defaultNS: 'general',
react: {
wait: true,
},
});
Reverting back to react-i18next v9 works as expected with this example (except that I need to use the old 'reactI18nextModule ' instead of the new 'initReactI18next')
can you please provide a runnable sample on codesandbox?
I gave it a try: https://codesandbox.io/s/48pk44xpr9
Somehow when I enable line 9 I get an error about type (not related to the actual problem).
And not sure how it works with the translation files in the sandbox.
Maybe you can help me out in order to get the sample working
Guess i know what is going on...will need to check what i can do to fix this ... later today
Would be awesome! Thanks
should be fixed in react-i18next@10.0.5
Man, that was fast. Thanks a lot!
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 -> there are many ways to help this project 🙏
should be fixed in react-i18next@10.0.5
The problem with this code is that, in large projects, you have to create all component with its own withTranslation hook, I translated this code to hooks, with a generic approach and less code.