Warum gibt getInitialNamespaces() einen Null- oder undefinierten Wert zurück und wie kann man das beheben? ⇐ JavaScript

[Anonymous]

Ich arbeite an meinem Remix-Vite-Projekt und richte derzeit i18n für die Lokalisierung ein. Anfangs habe ich herausgefunden, dass keine Schaltflächenkomponente in meinem Projekt funktioniert (ich habe sogar console.log-Anweisungen ausprobiert, aber leider). Ich habe irgendwo gelesen, dass es möglicherweise an einem Fehler an einer anderen Stelle liegt. Ich habe stundenlang versucht, dieses Problem zu lösen, aber nichts hat funktioniert, also habe ich begonnen, nach anderen Fehlern zu suchen. Während ich auf meinem IDE-Terminal keine Fehlermeldung erhalte, gibt der Site-Inspektor diesen Fehler aus:

Code: Select all

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)

Das passiert offensichtlich, weil getInitialNamespaces einen Nullwert oder einen undefinierten Wert zurückgibt. Die Frage ist, wie man das verhindern kann. Nichts, was ich getan habe, scheint zu funktionieren und ich bin am Ende meiner Weisheit.
Hier ist der spezifische Codeblock:

Code: Select all

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);
}

Ich habe versucht, einfach ns: „translation“ zu schreiben, aber das scheint auch nicht zu funktionieren. Ich habe auch die Remix-i18n-Dokumente überprüft, konnte aber auch nichts finden, was besagt, dass ns geschrieben werden soll: getInitialNamespaces(). Der Code befand sich ursprünglich nicht in einem Try-Block, aber nachdem ich den Fehler ausgegeben hatte, stellte ich fest, dass die Hydrate-Funktion vorhanden war, in der er sich gerade befindet. Daher ist der Try-Block erforderlich.
Der i18next .server.js:

Code: Select all

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:

Code: Select all

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);
});
}

Bitte beachten Sie auch, dass ich nicht einmal weiß, ob dies der Grund dafür ist, dass die Tasten nicht funktionieren, aber dies ist bisher mein einziger Hinweis.
Vielen Dank.