react-i18next: attempted import error: 'withNamespaces' is not exported from 'react-i18next'

Question

I'm currently trying to translate my application with react-i18next and use multiple files for the translation because i want it to be clearly. That's why I wanted to use withNamespaces rather than withTranslation, but when I try to import withNamespaces from 'react-i18next' I get the following error message:

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

This is my code:

import React, { Component } from 'react'
import {Link} from 'react-router-dom'
import {  withNamespaces } from 'react-i18next'


class Navbar extends Component {
    render(){
        return (
            <>
                <ul>
                    {this.props.items.map(item => (
                        <li key={item.key}>
                            <Link to={item.route} className='jb-navbar_menu-item_link' >
                                { this.props.t('header:'+item.name)}
                            </Link>
                        </li>
                    ))}
                </ul>
            </>
        )
    }
}

export default  withNamespaces('header')(Navbar)

What am I doing wrong? Am I importing this in a wrong way? Or is there something wrong with my config maybe?

This is my i18n.js:

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

import translationEN from './locales/en/translation.json';
import translationDE from './locales/de/translation.json';
import headerDE from './locales/de/header.json';
import headerEN from './locales/en/header.json';

// the translations
const resources = {
  de: {
    translation: translationDE,
    header: headerDE
  },
  en: {
    translation: translationEN,
    header: headerEN
  }
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    ns:['translation', 'header'],
    defaultNS: 'translation',

    resources,
    lng: "de",
    fallbackLng: "de",

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  }); // key in common namespace);

i18n.loadNamespaces('header')

export default i18n;

Answer 1

There is most probably a mismatch in your react-i18next version

withNamespaces has been deprecated in V10, you can use withTranslation instead.
There is a good table in the react-i18next doc showing which components for which version:
https://react.i18next.com/latest/migrating-v9-to-v10