Error with i18n (Error: You are passing an undefined module! Please check the object you are passing to i18next.use())

user_6193913 0
Viewed 6599

I am trying to setup i18n in my Gatsby project.

I've been following this tutorial step by step:

https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby/

First I download the required packages:

npm i -S i18next i18next-xhr-backend i18next-browser-languagedetector react-i18next

Then I set up the i18n component

import i18n from "i18next"
import Backend from "i18next-xhr-backend"
import LanguageDetector from "i18next-browser-languagedetector"
import { reactI18nextModule } from "react-i18next"

i18n
.use(Backend)
.use(LanguageDetector)
.use(reactI18nextModule)
.init({
    fallbackLng: "en",

    // have a common namespace used around the full app
    ns: ["translations"],
    defaultNS: "translations",

    debug: true,

    interpolation: {
    escapeValue: false, // not needed for react!!
    },

    react: {
    wait: true,
    },
})

export default i18n

Imported it in my layout component:

import React from "react"
import "./layout.scss"
import NavMenu from "./NavMenu/navMenu"
import i18n from './i18n/i18n'

export default function Layout({ children }) {
  return (
    <div className="container">
      <NavMenu />
      {children}
    </div>
  )
}

However, when I run my app I get the following error:

enter image description here

Does anyone have a clue what the problem might be?

react-i18next gatsby
1 Answers

The import from react-i18next is wrong. It should be

import { initReactI18next } from "react-i18next"

and

.use(initReactI18next)

If you attempt to import something that is not exported the value is undefined and then use gives you the message you're seeing.

It seems to have been called reactI18nextModule in an earlier version of react-i18next which is why you can find tutorials using it.

I made a demonstration of the exports in RunKit

user_12478530
Related