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.