React i18next не удается загрузить файл translation.json в формате json

React i18next не может загрузить translation.json как json. все работает нормально до того, как я использую папку сборки

Я использую React / Django.

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 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>)}>
          <App />
      </Suspense>,
    </React.StrictMode>,
    document.getElementById('root')
  );

здесь я переключаюсь между языками loginheader.js :

debug console network/headers:

Request URL: http://127.0.0.1:8000/locales/en/translation.json
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8000
Referrer Policy: same-origin
Content-Length: 948
Content-Type: text/html; charset=utf-8
Cross-Origin-Opener-Policy: same-origin
Date: Sat, 02 Jul 2022 13:54:00 GMT
Referrer-Policy: same-origin
Server: WSGIServer/0.2 CPython/3.10.2
Vary: Origin
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cookie: csrftoken=KKBUsud0hxf0n2XkfSuQw9Hx3RLkHnSTyJHzGL8xyg502fPxxcDab3113rLJxQyu; i18next=en
Host: 127.0.0.1:8000
Referer: http://127.0.0.1:8000/
sec-ch-ua: ".Not/A)Brand";v="99", "Google Chrome";v="103", "Chromium";v="103"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

network/preview: Вам необходимо включить JavaScript для запуска этого приложения.

сеть/ответ :

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,700&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"><link rel="manifest" href="/manifest.json"/><title>Diploman</title><script defer="defer" src="/static/js/main.1e76e6bb.js"></script><link href="/static/css/main.e38e49bd.css" rel="stylesheet"></head><body dir="ltr"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

Убедитесь, что файлы json перевода размещены/хостились как статические ресурсы на вашем сервере Django (WSGIServer). https://www.linkedin.com/pulse/serving-static-files-wsgi-tercio-a-oliveira

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