i18n 错误（错误：您正在传递未定义的模块！请检查您传递给 i18next.use() 的对象）

我正在尝试在我的 Gatsby 项目中设置 i18n。

我一直在逐步遵循本教程：

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

首先我下载所需的包：

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

然后我设置了 i18n 组件

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

将其导入到我的布局组件中：

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

但是，当我运行我的应用程序时，出现以下错误：

有谁知道问题可能是什么？

进口自react-i18next是错的。它应该是

import { initReactI18next } from "react-i18next"

and

.use(initReactI18next)

如果您尝试导入未导出的内容，则该值是未定义的，然后use向您提供您所看到的消息。

好像被称为reactI18nextModule在早期版本中react-i18next这就是为什么您可以找到使用它的教程。

我制造了一个RunKit 中导出的演示 https://runkit.com/ehrencrona/i18nextimport