Attempted import error: 'useTranslation' is not exported from 'react-i18next'

4.1k views Asked by At

i need help i got this error

./src/components/Header/Header.js
Attempted import error: 'UseTranslation' is not exported from 'react-i18next'.

its a new projects where i have install the https://react.i18next.com step by step but i got problem with the import UseTranslation

in header.js i got just this

import { useTranslation } from 'react-i18next';
//style
import "./Header.scss";


class Header extends Component {
  
  render() {


    const { t, i18n } = useTranslation();

    return (
      
      <div className="container-header">
        <div className="container-header__main">
          <div className="container-header__main-overlay">
            <div className="container-header__main-overlay__text">
              <div className="container-header__main-overlay__text__title">
         
                {t('hello')}
              </div>
              <div className="container-header__main-overlay__text__subtitle">
                  {t('hello2')}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Header;


this is my i18n.js this is ok i think

import i18n from "i18next";
import { reactI18nextModule } from "react-i18next";

import EN from './assets/translation/en.json';
import CZ from './assets/translation/cz.json';

const resources = {
  en: {
    translation: EN
  },
  cz:{
      translation: CZ
  }
};

i18n
  .use(reactI18nextModule) 
  .init({
    resources,
    lng: "en",
    fallbackLng: "en",
    useSuspense: false,

  });

export default i18n;
1

There are 1 answers

8
krimo On BEST ANSWER

the useTranslation it use for hook but you use classComponent you shold use Hoc

import { withTranslation } from 'react-i18next';
   const  {t,i18n} =this.props

  {t('hello2')}
export default withTranslation()(Header);

and in your index.js add Suspense

import React, { Component, Suspense } from 'react';

  <Suspense fallback={<div>Loading....</div>}>
   
   <App />//your Component

  </Suspense>