i18next.js:25 не удалось загрузить перевод пространства имен для языка ru не удалось выполнить синтаксический анализ

Уже битый час не получается подключить i18next. Проблема заключается в i18next-http-backend. Если подключаю без него, как указано вот тут, c переменной и переводом прямо в init: https://www.i18next.com/overview/getting-started, то все работает. Однако, я хочу подключить файлы отдельно, с использованием i18next-http-backend. Что бы я ни делала, указанная в заголовке ошибка не уходит. Файлы JSON на валидность проверила, i18n.js лежит возле index.js, Suspense есть, папка locales лежит в pablic, при build загружается в build. Варианты написания пути попробовала, по-моему, все возможные. Помогите решить проблему=( Использую банальный create-react-app.

Файл i18n.js

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

i18n
    .use(HttpApi)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        supportedLngs: ['ru', 'en'],
        fallbackLng: 'ru',
        defaultLocale: 'en',
        locales: ['ru', 'en'],
        debug: true,
        ns: ['translation'],
        defaultNS: 'translation',
        detection: {
            order: ['cookie', 'localStorage'],
            caches: ['cookie']
        },
        interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
        },
        backend: {
            loadPath: "locales/{{lng}}/translation.json",
            crossDomain: true,
            withCredentials: false,
            overrideMimeType: false,
            requestOptions: {
                // used for fetch, can also be a function (payload) => ({ method: 'GET' })
                mode: 'cors',
                credentials: 'same-origin',
                cache: 'default'
            },
            reloadInterval: false
        },
    });

export default i18n;

index.js

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './common.css';
import App from './components/App.js';
import TodoLoader from './components/loader/loader.js'
import reportWebVitals from './reportWebVitals';
import './i18n';

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

reportWebVitals();

Подключение

import { useRef, Suspense } from "react";
import { useTranslation } from "react-i18next";
import TodoLoader from '../loader/loader.js'
import './language.css';

function Language() {
    const languageRef = useRef(null);
    const { t, i18n } = useTranslation();

    const changeLanguage = (language, e) => {
        i18n.changeLanguage(language)
        const child = languageRef.current.children;
        for (let item of child) {
            item.classList.remove('active');
        }
        e.target.closest('li').classList.add('active');
    }

    return (
        <Suspense fallback={<TodoLoader></TodoLoader>}>
            <ul className="changeLanguage" ref={languageRef}>
                <li className='active'
                    onClick={(e) => { changeLanguage("ru", e) }}>
                    <span>ru</span>
                </li>
                <li className=''
                    onClick={(e) => { changeLanguage("en", e) }}>
                    <span>en</span>
                </li>
                <div className="aside__title title mx-2.5">{t("main.opportunitytr")}</div>
            </ul>
        </Suspense >
    )
}
export default Language;

JSON

{
    "opportunitytr": "opportunity",
    "canvas": "canvas",
    "calendar": "calendar",
    "send": "send",
    "mainBigTitle": "Wright or draw ToDo",
    "mainSmallTitle": "Wright ToDo",
    "addTodo": "Add Todo",
    "search": "Search",
    "searchPlaceholder": "Search",
    "opportunityList": [
        "archive",
        "second",
        "third"
    ],
    "headerList": [
        "First",
        "Second",
        "third",
        "forth"
    ]
}

Вот ссылка на GH если надо: https://github.com/Dioneer/ReactStart/tree/gh-pages, там есть сборка в settings

UPD Я заставила эту штуку работать, но в чем проблем понять не могу. В путях я добавила название директории и все заработало (я просто ткнула пальцем в небо) loadPath: "ReactStart/locales/{{lng}}/translation.json", было loadPath: "locales/{{lng}}/translation.json". Однако, при заливе на GH это не работает. Еще час мучений с gh-pages привел к такому ответу: "homepage": "http://dioneer.github.io/ReactStart/" в JSON меняю на "homepage": "http://dioneer.github.io/", после чего руками дописываю в путях ReactStart/. Решение дурное, но ничего лучше не нашла. Если не меняю, то списки на перевод подтягиваются как http://dioneer.github.io/ReactStart/ReactStart/locales/{{lng}}/translation.json и это логично. Если пути прописать без ReactStart/, по списки будут подтягиваться как http://dioneer.github.io/locales/{{lng}}/translation.json. Что за ерунда??? Почему исчезает наименование директории?