在NX Monorepo中配置react-i18next遇404问题求助

核心原因 #

NX Monorepo的静态资源映射规则与普通项目不同，加上Module Federation的微应用运行时依赖宿主环境，相对路径的loadPath无法正确定位到翻译文件，且资源未被正确拷贝到可访问目录。

具体解决方案 #

1. 统一翻译文件存放位置 #

将所有翻译文件（包括微应用的）放在宿主应用的public/locales目录下，目录结构如下：

apps/host/
├─ public/
│  └─ locales/
│     ├─ en/
│     │  └─ translation.json
│     └─ pt-BR/
│        └─ translation.json

2. 修正i18next的loadPath配置 #

放弃相对路径，改用绝对路径直接指向宿主的静态资源根目录：

backend: {
  loadPath: '/locales/{{lng}}/{{ns}}.json',
}

NX启动后，宿主的public目录会被映射到站点根路径/，因此该路径可以直接访问到翻译文件。

3. 配置NX静态资源拷贝（微应用场景） #

如果微应用需要独立维护翻译文件，在微应用的project.json中添加静态资源拷贝规则，确保构建时将微应用的locales目录复制到宿主的输出目录：

{
  "targets": {
    "build": {
      "options": {
        "assets": [
          {
            "input": "apps/your-mfe/src/locales",
            "output": "/locales"
          }
        ]
      }
    }
  }
}

4. 验证资源可访问性 #

启动项目后，在浏览器地址栏直接访问http://localhost:4200/locales/en/translation.json，如果能正常返回文件内容，说明路径配置正确；若仍404，检查文件是否存在、NX构建配置是否生效。

修正后的完整配置 #

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

i18n
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init<HttpBackendOptions>({
    fallbackLng: 'pt-BR',
    debug: true,
    load: 'currentOnly',
    supportedLngs: ['en', 'pt-BR'],
    detection: {
      lookupCookie: 'i18nextLng',
      lookupLocalStorage: 'i18nextLng',
      order: ['localStorage', 'cookie'],
      caches: ['localStorage', 'cookie'],
    },
    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  });

export default i18n;

内容的提问来源于stack exchange，提问作者niltonxp