react-i18next: TypeError: _reactI18next2.default is undefined

Hi! It’s very pity, that there is no any good step-by-step tutorials regarding react-i18next setup and use. I’m trying to recreate example from repo, but receiving this error: TypeError: _reactI18next2.default is undefined My index.js is:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { ModalContainer } from 'react-router-modal';
import LandingPage from './components/villages/Landing Page.js';
import WOW from 'wowjs';

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import registerServiceWorker from './registerServiceWorker';

class App extends React.Component {
  componentDidMount() {
    new WOW.WOW().init();
  }

  render() {
    return (
      <div>
        <LandingPage/>
        <ModalContainer />
      </div>
    )
  }
}

ReactDOM.render(
    <I18nextProvider i18n={ i18n }>
      <BrowserRouter>
          <App />      
      </BrowserRouter>
    </I18nextProvider>,
     document.getElementById('app')
);
registerServiceWorker();

I’ve put both i18n.js and registerServiceWorker.js in my folder. In i18n.js.js I’ve commented the locize imports.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 21 (10 by maintainers)

Most upvoted comments

TechnologiesBlock is not extended by translate hoc - so there won’t be any t in props.

module.exports = translate()(TechnologiesBlock)

you can’t export 2 “things” as default…you can use named exports if you need to export multiple objects, functions, …

if you do not need an export const ExtendedAnotherModal = translate()(AnotherModal); is all needed

Revel Component is not extended - you just export an extended as default!

change it to:

// ...
const ExtendedRevel = translate()(Revel);
export default ExtendedRevel;

// ...
<ModalLink component={ExtendedRevel} path={/revel} />

const { t } = this.props; where you use the t function

const { i18n } = this.props; where you need to changeLanguage or access other stuff on the i18next instance (https://www.i18next.com/api.html)