react-i18next 未在使用 create-react-app 创建的 React 应用程序中加载 json 翻译文件

IT技术 reactjs webpack i18next react-i18next
2021-05-11 05:51:02

我用create-react-app创建了一个 React 应用程序

我想实现翻译，我发现了react-i18next

安装所需的软件包后，我已经设置了 i18n.js 配置文件：

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import XHR from 'i18next-xhr-backend';

i18n
    .use(XHR)
    .use(LanguageDetector)
    .init({
      debug: true,
      lng: 'en',
      nsSeparator: false,
      keySeparator: false,
      fallbackLng: false,
      backend: {
        loadPath: 'locales/{{lng}}/{{ns}}.json'
      }
    });


export default i18n;

我收到此错误： i18next::backendConnector: loading namespace translation for language en failed failed parsing locales/en/translation.json to json

这是因为 webpack 没有找到 json 文件，而是返回 index.html 文件内容：

在此处输入图片说明

2个回答

我不确定你把语言环境文件放在哪里，但我看到两个问题：

  1. 您已经指定了一个相对 URL，因此您加载/kiosk/parents/locales而不是/locales. 您需要在加载路径的开头添加一个斜杠。

  2. 对于 Create React App 来提供静态文件，您需要将它们放入public文件夹中。这在其用户指南中有更详细的描述。所以请确保在项目根目录中的文件夹locales内public。

希望这可以帮助！

以防万一有人像我一样需要这个：

如果您碰巧在 package.json 文件中更改了主页路径，如下所示：

...
    "homepage": "/tom/",
...

您还需要将此部分添加到 i18n，如下所示：

i18n
    .use(XHR)
    .use(LanguageDetector)
    .init({
      debug: true,
      lng: 'en',
      nsSeparator: false,
      keySeparator: false,
      fallbackLng: false,
      backend: {
        loadPath: '/tom/locales/{{lng}}/{{ns}}.json'
      }
    });


export default i18n;
其它你可能感兴趣的问题
上一篇带有 3DTouch 的 Anet A8 没有在中心放置 X 下一篇如何重新编程新 Prusa MK3 MMU2 以接受更高的 Z 轴