react-i18next v10 lazy loading does not work

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’)

[jamuhl]

Guess i know what is going on…will need to check what i can do to fix this … later today

[jamuhl]

@MartinGK you’re aware that withTranslation is a HOC and uses a hook useTranslation - reading docs might help