react-i18next выдает ошибкуmissingKey только в сборке

введите здесь описание изображения

Ниже мои index.js и i18next.js(конфиг для i18n)

index.js

import React, { Suspense } from 'react'
import i18n from './i18next'
import './i18next'
import ReactDOM from 'react-dom'
import App from './App'
import * as serviceWorker from './serviceWorker'
import Loading from './components/Styled/Loading/Loading'

i18n.init().then(() =>
  ReactDOM.render(
    <React.StrictMode>
      <Suspense fallback={<Loading />}>
        <App />
      </Suspense>
    </React.StrictMode>,
    document.getElementById('root')
  )
)

i18next.js

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'

import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
// not like to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init

const Languages = ['en', 'fr']

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    whitelist: Languages,
    keySeparator: false,
    defaultNS: 'translation',
    ns: ['translation'],
    backend: {
      loadPath: `/locales/{{lng}}/{{ns}}.json`,
    },
    load: 'unspecific',
    react: {
      wait: true,
    },    
    interpolation: {
      escapeValue: false,
    },
  })

export default i18n

консоль введите здесь описание изображения

Итак, вот суть. Я использую хук useTranslation в своих компонентах, и он прекрасно работает на локальном хосте. Однако я постоянно получаю ошибку missingKey на производстве, где развернута сборка. Перепробовали все возможные настройки из других ответов, но безуспешно. Извиняюсь за огромное содержание, я просто хотел быть тщательным.


person Nimsrules    schedule 22.07.2020    source источник


Ответы (1)


Разобрался с решением. Поскольку я обслуживаю сборку в подкаталоге, мне пришлось добавить ее в loadPath.

.env

REACT_APP_VERSION=$npm_package_version
REACT_APP_PUBLIC_URL='/dy/'

i18next.js

backend: {
  loadPath: `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json`,
}
person Nimsrules    schedule 24.07.2020