react-i18next getting error Attempted import error

All we need is an easy explanation of the problem, so here it is.

I tried to use https://react.i18next.com/
For localization and I am getting error: Attempted import error: ‘initReactI18next’ is not exported from ‘react-i18next’.

This is my i18n.js file:

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

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
// not like to use this?
// have a look at the Quick start guide 
// for passing in lng and translations on init

i18n
  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }
  });


export default i18n;

My package.json

{ “name”: “heatmann”, “version”: “0.1.0”, “private”: true,
“dependencies”: {
“axios”: “^0.19.0”,
“i18next”: “^19.4.5”,
“i18next-browser-languagedetector”: “^4.3.0”,
“i18next-http-backend”: “^1.0.15”,
“i18next-xhr-backend”: “^3.2.2”,
“prop-types”: “^15.7.2”,
“proptypes”: “^1.1.0”,
“react”: “^16.12.0”,
“react-alice-carousel”: “^1.17.2”,
“react-dom”: “^16.12.0”,
“react-i18next”: “^9.0.10”,
“react-loader-spinner”: “^3.1.5”,
“react-native-gesture-handler”: “^1.5.2”,
“react-navigation”: “^4.0.10”,
“react-navigation-stack”: “^1.10.3”,
“react-router-dom”: “^5.1.2”,
“react-scripts”: “^3.3.0” }, “scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject” }, “eslintConfig”: {
“extends”: “react-app” }, “browserslist”: {
“production”: [
“>0.2%”,
“not dead”,
“not op_mini all”
],
“development”: [
“last 1 chrome version”,
“last 1 firefox version”,
“last 1 safari version”
] }, “devDependencies”: {
“@babel/plugin-proposal-export-default-from”: “^7.8.3”,
“css-loader”: “^3.4.2” } }

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Deleted package.json entries with i18next.
Deleted all node_modules folder
Reinstalled npm install
npm install react-i18next i18next --save
// when like to detect user language and load translation
npm install i18next-http-backend i18next-browser-languagedetector --save

This solved my problem.

Method 2

npm install react-i18next i18next --save

or

yarn add react-i18next i18next 

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply