getInitialNamespaces()返回Null/Undefined导致i18next初始化报错的原因及修复方法

我帮你分析一下这个问题，你遇到的Cannot convert undefined or null to object报错，根源是客户端的getInitialNamespaces()函数找不到服务端注入的i18n初始化数据，导致内部调用Object.values时传入了无效值。而按钮失效大概率是因为i18next初始化失败，引发React组件渲染异常，进而事件绑定出了问题。

咱们一步步来修复：

一、核心原因：服务端未注入全局i18n数据 #

getInitialNamespaces()依赖服务端在HTML中注入的全局变量window.__remixI18next__，如果这个变量不存在，函数内部就会处理undefined/null，直接抛出报错。你的entry.server.jsx目前没做这一步，所以客户端拿不到必要的命名空间数据。

二、具体修复步骤 #

1. 修改entry.server.jsx，注入全局i18n数据 #

在服务端渲染时，我们需要把i18n的初始数据写入HTML的全局变量中。修改你的entry.server.jsx：

首先，在创建i18n实例后，获取初始props：

// ... 现有代码
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);
      // 加个fallback，防止路径为空时lng变成undefined
      return pathSegments[0] || i18n.fallbackLng;
    })(),
    ns,
    backend: { loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json") },
  });

// 新增：获取remix-i18next的初始props
let initialProps = await i18next.getInitialProps(request, ns);

然后，在流渲染时，把初始props注入到HTML的<head>中：

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

  let { pipe, abort } = renderToPipeableStream(
    <I18nextProvider i18n={instance}>
      <RemixServer context={remixContext} url={request.url} />
    </I18nextProvider>,
    {
      [callbackName]: () => {
        let body = new PassThrough();
        responseHeaders.set("Content-Type", "text/html");

        // 先写入HTML开头，同时注入全局i18n变量
        body.write(`<!DOCTYPE html>
<html lang="${instance.language}">
<head>
  <script>
    window.__remixI18next__ = ${JSON.stringify(initialProps)};
  </script>
</head>
<body>`);

        // 渲染Remix内容
        pipe(body);

        // 写入HTML结尾
        body.write(`</body></html>`);

        const stream = createReadableStreamFromReadable(body);

        resolve(
          new Response(stream, {
            headers: responseHeaders,
            status: didError ? 500 : responseStatusCode,
          }),
        );
      },
      onShellError(error) {
        reject(error);
      },
      onError(error) {
        didError = true;
        console.error(error);
      },
    },
  );

  setTimeout(abort, ABORT_DELAY);
});

2. 强化entry.client.jsx的健壮性 #

虽然服务端注入后getInitialNamespaces()应该能正常返回，但我们可以再加一层保险，避免意外情况：
把原来的：

const ns = getInitialNamespaces() || ['translation'];

改成：

// 优先取服务端传递的命名空间， fallback到默认的translation
const ns = getInitialNamespaces() || ['translation'];

3. 检查i18n基础配置 #

确保你的./i18n配置文件格式正确，比如：

export default {
  supportedLngs: ["en", "tr"], // 替换成你实际支持的语言
  fallbackLng: "en",
  defaultNS: "translation",
  ns: ["translation"], // 有其他命名空间的话在这里添加
};

4. 路由命名空间加载检查 #

如果你的路由使用了自定义命名空间，需要在路由的loader中明确加载它们，比如：

// 某个路由文件
import i18next from "~/i18next.server";

export const loader = async ({ request }) => {
  // 加载自定义命名空间
  await i18next.loadNamespaces(request, ["custom-namespace"]);
  // 你的其他loader逻辑
  return {};
};

或者用withI18nLoader简化：

import { withI18nLoader } from "remix-i18next/server";
import i18next from "~/i18next.server";

export const loader = withI18nLoader(i18next, ["custom-namespace"])(async ({ request }) => {
  // 你的其他loader逻辑
  return {};
});

三、测试验证 #

重启开发服务器，刷新页面，检查浏览器控制台是否还有报错，同时测试按钮功能是否恢复正常。

备注：内容来源于stack exchange，提问作者Ege Turanoğlu