React i18next не удается загрузить перевод после сборки

Я не знаю, почему react i18next display loading namespace fail on the debug console. Я пробовал много предложений без успеха. Я использую папку react build внутри проекта Django.

Он работает нормально только на localhost:3000, что безумно, но как только я пытаюсь использовать папку сборки, я получаю вышеуказанную ошибку на отладочной консоли

i18n.js :

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

// don't want to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init

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

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    lng: 'en',
    react: {
      useSuspense: true,
    },
    // the translations
    // (tip move them in a JSON file and import them,
    // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
    supported: ["en", "fr", "ar"],
    fallbackLng: "en",
    detection: {
      order: ['path', 'cookie', 'htmlTag', 'localStorage', 'subdomain'],
      caches: ['cookie'],
    },
    debug: true,
    whitelist: Languages,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    nsSeperator: false,
    keySeperator: false,
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  });

export default i18n;

index.js :

import React, {Suspense} from 'react';
import ReactDOM from 'react-dom';
import i18n from "i18next";
import { I18nextProvider } from "react-i18next";
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import './i18n';

  ReactDOM.render(
    <React.StrictMode>
      <Suspense fallback={(<div className='index__loading'><h2>Loading...</h2></div>)}>
        <I18nextProvider i18n={i18n}>
          <App />
        </I18nextProvider>
      </Suspense>,
    </React.StrictMode>,
    document.getElementById('root')
  );

loginheader.js :

отладочная консоль:

DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND

i18next.js:27 i18next::backendConnector: loading namespace translation for language en failed failed parsing /locales/en/translation.json to json

Вернуться на верх