React i18next не отображает перевод после выполнения сборки npm

React i18next не может получить перевод из файла JSON после выполнения команды сборки. Обратите внимание, все работает нормально без сборки в react localhost:3000

Я использую файл сборки React в Django.

Я проверил похожий вопрос, но решение не сработало для меня: Использование i18next для сборки react production приводит к тому, что перевод отображает только строки

index.js :

import React, {Suspense} from 'react';
import ReactDOM from 'react-dom';
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';
import './index.css';

const languages = [
  {
    code: 'fr',
    name: 'Français',
    country_code: 'fr'
  },
  {
    code: 'en',
    name : 'English',
    country_code: 'en'
  },
  {
    code: 'ar',
    name: 'العربية',
    country_code: 'ly',
    dir: 'rtl'
  }
]

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    lng: 'en',
    react: {
      useSuspense: false,
      wait: 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: false,
    whitelist: languages,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    nsSeperator: false,
    keySeperator: false,
    backend: {
      loadPath: '/locales/{{lng}}/translation.json',
    },
  });

  const loadingMarkup = (
    <div className='index__loading'>
      <h2>Loading..</h2>
    </div>
  )

ReactDOM.render(
  <Suspense fallback={loadingMarkup}>
    <React.StrictMode>
    <App />
  </React.StrictMode>,
  </Suspense>,
  document.getElementById('root')
);

заголовка, где я нажимаю для переключения между языками :

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