react-i18next getting error Attempted import error

Question

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" } }

which version of react u r using .. hope u r using greater than 16.7.0 alpha (or 16.8 and+) — Guru Hadadi
– Guru Hadadi, Commented Jun 17, 2020 at 13:29

Jérôme Teisseire · Accepted Answer · 2020-11-05 12:46:04Z

4

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.

edited Nov 5, 2020 at 12:46

Jérôme Teisseire

1,5461 gold badge16 silver badges26 bronze badges

answered Jun 18, 2020 at 6:32

Emilis

1622 gold badges5 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

adrai Over a year ago

fyi: a newer react-i18next guide can be found here: dev.to/adrai/…

Avinash · Accepted Answer · 2020-11-23 15:28:02Z

0

npm install react-i18next i18next --save

or

yarn add react-i18next i18next

answered Nov 23, 2020 at 15:28

Avinash

1,1483 gold badges15 silver badges28 bronze badges

Collectives™ on Stack Overflow

react-i18next getting error Attempted import error

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related