React-i18next: Object(...) is not a function

[harrisrobin]

Describe the bug
Ever since i upgraded to the latest i18next-react and i18next (for hooks)
I keep getting the following error:

Relevant Library Versions:

    "react-i18next": "^10.0.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "i18next": "^14.0.1",

Occurs in react-i18next version
"react-i18next": "^10.0.0",

To Reproduce
Steps to reproduce the behavior:
Not really sure how to reproduce, but this is my i18n.ts

import * as en from "./en.json"
import * as fr from "./fr.json"
import i18n from "i18next"
import detector from "i18next-browser-languagedetector"
import backend from "i18next-xhr-backend"
import { initReactI18next } from "react-i18next"

i18n
  .use(detector)
  .use(backend)
  .use(initReactI18next)
  .init({
    // we init with resources
    resources: {
      en: { translation: en },
      fr: { translation: fr }
    },
    debug: true,
    lng: "en",
    fallbackLng: "en",
    interpolation: {
      escapeValue: false
    },
    react: {
      wait: true
    }
  })

export default i18n

Expected behaviour
Expecting the translations to work but having a hard time deciphering what the error is.

Screenshots

Any help would be good, i spent quite a bit of time refactoring my translation files and this is a huge blocker.

Thanks in advance :)

[adrai]

Just to be sure you have installed the latest version, try to delete the node_modules folder (and the package-lock.json file) and npm install again.

[jamuhl]

Did you upgrade react, react-dom to 16.8.0?!?

[jamuhl]

https://github.com/i18next/react-i18next/blob/master/package.json#L84

[harrisrobin]

@adrai good call... my node_modules version of i18next was deceptive and not what i had upgraded to in my package.json.

Sorry for the spam.

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project -> there are many ways to help this project :pray:

[Dara-To]

I have the same error now. Did all of the above suggestions: upgraded react and react-dom to 16.9 then back to 16.8, deleted node_modules and package-lock.json. I also removed the deprecated @types/i18... Are there other dependencies I have to update? My relevant dependencies below.

"dependencies": {
        "@types/react-dom": "^16.9.0",
        "@types/react-redux": "^6.0.9",
                "gatsby": "^2.0.13",
        "gatsby-cli": "^2.4.5",
                "i18next": "^17.0.13",
        "i18next-browser-languagedetector": "^3.0.3",
        "i18next-xhr-backend": "^3.1.2",
                "react": "^16.8.0",
                "react-dom": "^16.8.0",
                "react-redux": "^5.0.7",
                "redux": "^4.0.0"
}

I previously had the warnings ReferenceError: XMLHttpRequest is not defined. I thought perhaps it was because of i18next-xhr-backend so I decided to try to upgrade all i18 packages. Then got this.

[jamuhl]

@Dara-To ReferenceError: XMLHttpRequest ...sounds more like you do not run your code on browser ;) -> do you get this on serverside?

Anyway getting the useState error is a clear sign of either dependencies in node_modules are not correct or there eventual are 2 versions of react...

[Dara-To]

No, it's when I develop with Gatsby. They are warnings, I can continue to develop. But they just appear all of a sudden and it's been months. I don't know what changed, there were a lot of developers working on the project and I haven't been in a while. We also have a yarn-lock on top of the package-lock.json. Maybe that's why? It's too dangerous right now for me to removed the yarn files.

How is it possible for a project to have 2 versions of React by the way?

I have to eventually upgrade i18 anyway. My versions were so old.

"react-i18next": "^7.12.0",
"i18next": "^17.0.13",
"i18next-browser-languagedetector": "^3.0.3",
"i18next-xhr-backend": "^3.1.2",

[jamuhl]

@Dara-To 2 versions -> someone builds a module for react you consume and adds react as a dependency with different version as yours -> there are two react modules in 2 versions floating around in the app -> but the most time that one is easy to spot (but harder to solve).