Почему getInitialNamespaces() возвращает нулевое или неопределенное значение и как это исправить? ⇐ Javascript

[Anonymous]

Я работаю над своим проектом remix vite и в настоящее время настраиваю i18n для локализации. Первоначально я обнаружил, что ни один компонент кнопки в моем проекте не работает (я даже пробовал операторы console.log, но, увы). Где-то читал, что это может быть из-за ошибки где-то еще. Я пытался решить эту проблему часами, но ничего не помогло, поэтому я начал искать другие ошибки. Хотя на моем терминале IDE ошибок нет, инспектор сайта выдает следующую ошибку:

Код: Выделить всё

entry.client.jsx:31 Error initializing i18next: TypeError: Cannot convert undefined or null to object
at Function.values ()
at getInitialNamespaces (remix-i18next_client.js?v=582c9657:5:27)
at hydrate (entry.client.jsx:14:16)

Очевидно, это происходит потому, что getInitialNamespaces возвращает нулевое или неопределенное значение. Вопрос в том, как это предотвратить. Кажется, ничего из того, что я сделал, не работает, и я в замешательстве.
Вот конкретный блок кода:

Код: Выделить всё

import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import i18n from "./i18n";
import i18next from "i18next";
import { I18nextProvider, initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";
import { getInitialNamespaces } from "remix-i18next/client";

async function hydrate() {
try {
const ns = getInitialNamespaces() || ['translation'];

await i18next
.use(initReactI18next)
.use(LanguageDetector)
.use(Backend)
.init({
...i18n,
ns,
defaultNs: 'translation',
backend: { loadPath: "/locales/{{lng}}/{{ns}}.json" },
detection: {
order: ["htmlTag"],
caches: [],
},
});
} catch (error) {
console.error("Error initializing i18next:", error);
}

startTransition(() => {
hydrateRoot(
document,




,
);
});
}

if (window.requestIdleCallback) {
window.requestIdleCallback(hydrate);
} else {
// Safari doesn't support requestIdleCallback
// https://caniuse.com/requestidlecallback
window.setTimeout(hydrate, 1);
}

Я пробовал просто написать ns: "translation", но это тоже не работает. Я также проверил документацию по remix i18n, но не смог найти ничего, что бы они писали ns: getInitialNamespaces(). Изначально код не находился внутри блока try, но после выдачи ошибки я обнаружил, что существует функция гидрата, в которой он сейчас находится, поэтому требуется блок try.
The i18next .server.js:

Код: Выделить всё

import { resolve } from "node:path";
import { RemixI18Next } from "remix-i18next/server";
import i18n from "./i18n";

let i18next = new RemixI18Next({
detection: {
supportedLanguages: i18n.supportedLngs,
fallbackLanguage: i18n.fallbackLng,
order: ["path"],
},
i18next: {
...i18n,
backend: {
loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"),
},
},
});

export default i18next;

entry.server.jsx:

Код: Выделить всё

import { PassThrough } from "stream";
import { createReadableStreamFromReadable } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { isbot } from "isbot";
import { renderToPipeableStream } from "react-dom/server";
import { createInstance } from "i18next";
import i18next from "./i18next.server";
import { I18nextProvider, initReactI18next } from "react-i18next";
import Backend from "i18next-fs-backend";
import i18n from "./i18n";
import { resolve } from "node:path";

const ABORT_DELAY = 5000;

export default async function handleRequest(
request,
responseStatusCode,
responseHeaders,
remixContext,
) {
let callbackName = isbot(request.headers.get("user-agent"))
? "onAllReady"
: "onShellReady";

let instance = createInstance();
let ns = i18next.getRouteNamespaces(remixContext);
await instance
.use(initReactI18next)
.use(Backend)
.init({
...i18n,
lng: (() => {
const pathSegments = new URL(request.url).pathname
.split("/")
.filter(Boolean);
return pathSegments[0];
})(),
ns,
backend: { loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json") },
});

return new Promise((resolve, reject) => {
let didError = false;

let { pipe, abort } = renderToPipeableStream(


,
{
[callbackName]: () => {
let body = new PassThrough();
const stream = createReadableStreamFromReadable(body);
responseHeaders.set("Content-Type", "text/html");

resolve(
new Response(stream, {
headers: responseHeaders,
status: didError ? 500 : responseStatusCode,
}),
);

pipe(body);
},
onShellError(error) {
reject(error);
},
onError(error) {
didError = true;
console.error(error);
},
},
);

setTimeout(abort, ABORT_DELAY);
});
}

Также обратите внимание, что я даже не знаю, является ли это причиной того, что кнопки не работают, но это пока моя единственная зацепка.
Спасибо, любезное.

Подробнее здесь: https://stackoverflow.com/questions/793 ... w-to-fix-i