Я получаю сообщения об ошибке «missingKey» от i18next, хотя кажется, что переводы загружаются (можно увидеть журнал консоли). Что я здесь делаю не так?
Вот мой файл i18n.js:
import i18n from 'i18next'
import i18nhttp from 'i18next-http-backend'
import Backend from 'i18next-chained-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
const options = {
backends: [
i18nhttp
],
backendOptions: [
{ loadPath: '/api/constants/{{lng}}/{{ns}}.lang.json' }
]
}
i18n.use(Backend).use(LanguageDetector).use(initReactI18next).init({
backend: options,
ns: ['fin'],
defaultNS: 'fin',
fallbackNS: 'fin',
fallbackLng: 'en',
keySeparator: false,
debug: true,
detection: {
order: ['queryString', 'cookie'],
cache: ['cookie'],
lookupCookie:'website#lang',
},
interpolation: {
escapeValue: false
},
react: {
useSuspense: true
}
}, (err, t) => {
if (err) return console.log('something went wrong loading', err);
t('pinDescription')
})
export default i18n
А вот и мой файл компонента React:
import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import '../../../scripts/i18n'
import { useTranslation } from 'react-i18next'
const Translation = () => {
const { t, i18n } = useTranslation()
return (
<div className="translation-sample">
<h2>Translation Sample - from files</h2>
<p>{t('accountNumberDescription')}</p>
</div>
)
}
const domElement = document.getElementById('translation-sample')
if (domElement) {
ReactDOM.render(
<React.StrictMode>
<Suspense fallback={<div>Loading ... </div>}>
<Translation />
</Suspense>
</React.StrictMode>,
domElement
);
}
Для перевода, который я пытаюсь отобразить в обратном вызове init (t ('pinDescription')), я получаю эту ошибку:
i18next::translator: key "pinDescription" for languages "en" won't get resolved as namespace "fin" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!
Что странно, поскольку в документации response-i81n указано, что этот обратный вызов выполняется после загрузки переводов.
Для этого и для ключа, который я пытаюсь отобразить в компоненте, я также получаю ошибку «отсутствует ключ»:
i18next::translator: missingKey en fin pinDescription pinDescription
i18next::translator: missingKey en fin accountDescription accountDescription
Я пробовал несколько вещей, в том числе:
- Оборачивание вызова init в обещание, экспорт этой функции и ожидание ее в компоненте
- Использование метода HOC
- Экспорт экземпляра i18n из файла i18n.js, а затем его импорт в компонент и вызов init (пробовал как ожидание, так и обещание / затем)
Кроме того, если я использую компонент оболочки Suspense, я вижу, что переводы загружены в консоль (однако я все еще получаю недостающие ключевые ошибки). Когда я удаляю "Suspense" и отказываюсь от него в конфигурации i81n.js, я никогда не вижу в консоли никаких указаний на то, что переводы загружены.
Я чувствую, что мне здесь не хватает чего-то фундаментального. Как лучше всего дождаться процесса загрузки инициализации / перевода перед использованием 't' в компоненте?
Основное различие между тем, что я делаю, и тем, что показывают большинство примеров в документации, заключается в том, что они показывают, что i18n.js загружается в файл index.js приложения React. У меня нет файла index.js или приложения React - я работаю с одним компонентом React, который позже будет внедрен в существующее приложение, отличное от React.
Кроме того, нет сетевых ошибок, я могу без проблем получить доступ к языковым json-файлам прямо в браузере, и я могу видеть, как переводы загружаются в консоли.
Вывод из консоли браузера (здесь я использую другое пространство имен, но код тот же):
Заранее благодарим за любые советы или за указание, где я ошибаюсь!