获取 i18next 未定义

Question

我正在初始化 i18next 但出现错误：

Uncaught TypeError: Cannot read property 'use' of undefined

以下是我的代码：

import i18n from 'i18next';// Getting eslint error Module imports itself.
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const fallbackLng = ['en'];
const availableLanguages = ['en', 'ar', 'fr'];

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng,

    detection: {
      checkWhitelist: true,
    },

    debug: false,

    whitelist: availableLanguages,

    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

反应：16.13.1

i18next：19.4.5

Answer 1

在安装 App 节点的 index.js 中，您是否也有import './i18n' 在那里？对于我的设置，除了您显示的文件之外，这也是必需的。

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {unregister} from './serviceWorker.js'
import './i18n';

ReactDOM.render(<App />, document.getElementById('root'));
unregister()

我有一个 i18n.js 文件，这是我自己的配置，用于使用我的设置进行加载和初始化

// i18n.js
// https://codesandbox.io/s/react-i18next-basic-example-with-usetranslation-hook-l05ml

import i18n from "i18next";
import Backend from "i18next-xhr-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import moment from 'moment/moment'
import 'moment/min/locales';

i18n
  // load translation using xhr -> see /public/locales
  // learn more: https://github.com/i18next/i18next-xhr-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)
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: "en-GB",
    detection: {
      // https://github.com/i18next/i18next-browser-languageDetector
      order: ['navigator'],
    },
    debug: false,
    interpolation: {      
       escapeValue: false, // not needed for react as it escapes by default
       format: function (value, format, lng) {
        if (format === 'uppercase') return value.toUpperCase();
        if (value instanceof Date) { 
          var result =  moment(value).locale(lng).format(format);
          return result;
        }
        if (format === 'intlDate') {
          return new Intl.DateTimeFormat(lng).format(value);
        }
        return value;
      },
      defaultVariables : {
        product: "Word Pigeon"
      }
    },
    // keySeparator: '_',
    react: {
      wait: true,
      escapeValue: false // not needed for react as it escapes by default
    }
  });