Cannot read property options on undefined with React and react-i18next

Question

I have the following code trying to use i18next in a react project that I want to translate.

But when calling the app I get an error that in the I18n component a TypeError: Cannot read property 'options' of undefined occurs.

// i18n components
import i18n from "/modules/ui/i18n";s
import { I18n } from 'react-i18next';
console.log(i18n);
export const renderRoutes = () => (
  <I18n>
    {
      (t, { i18n }) => (
        <Router history={browserHistory}>
          <Switch>
            <Route exact path="/" component={LandingPage} />
          </Switch>
        </Router>
      )
    }
  </I18n>
);

I have added the log statement and it returns an clearly defined i18n object with an options property. Not sure what to do.

I've moved the property into the specific component in case it was not compatible with the router function and the same issue has occurred.

Update

The issue was in the i18n component.

i18n
  .use(LanguageDetector)
  .use(Backend)
  .init({ ... })

Was changed to

i18n
  .use(LanguageDetector)
  .use(Backend)
  .use(reactI18nextModule)
  .init({ ... })

and the issue was solved.

Answer 1

I added the answer in the update I was missing the .use(reactI18NextModule) section.