i18next::backendConnector：加載語言 vi 的命名空間翻譯失敗解析失敗../public/locales/vi/translation.json 到 json

Question

問題

加載語言 vi 的命名空間翻譯失敗。 . .

我做了什么

第 1 步：npx create-react-app AwesomeProject

第 2 步： npm install i18next 18next-browser-languagedetector 18next-http-backend react-i18next

第 3 步：我在 public/locales 中創建“en”和“vi”文件夾

public/locales/en/translation.js中的 json 文件是這樣的：

{
  "menuItem": {
    "dashboard__title": "Dashboard",
    "dashboard__subMenu": {},

    "task__title": "Task",
    "task__subMenu": {
      "task__child__1__title": "Internal mailbox",
      "task__child__1__subMenu": {},

      "task__child__2__title": "Calendar",
      "task__child__2__subMenu": {
        "task__child__2.1__title": "Work schedule management",
        "task__child__2.1__subMenu": {}
      },

      "task__child__3__title": "The job needs support",
      "task__child__3__subMenu": {},

      "task__child__4__title": "Notify",
      "task__child__4__subMenu": {
        "task__child__4.1__title": "View announcements",
        "task__child__4.1__subMenu": {},

        "task__child__4.2__title": "Manage notifications",
        "task__child__4.2__subMenu": {}
      }
    },

    "news__title": "News",
    "news__subMenu": {
      "news__child__1__title": "Calendar",
      "news__child__1__subMenu": {},

      "news__child__2__title": "Project management",
      "news__child__2__subMenu": {},

      "news__child__3__title": "Electronic vouchers",
      "news__child__3__subMenu": {}
    },

    "humanResource__title": "Human Resource",
    "humanResource__subMenu": {},

    "cms__title": "CMS",
    "cms__subMenu": {},

    "calendar__title": "Calendar",
    "calendar__subMenu": {},

    "docs__title": "Documentation",
    "docs__subMenu": {},

    "elearning__title": "Elearning",
    "elearning__subMenu": {},

    "category__title": "Category",
    "category__subMenu": {},

    "system__title": "System",
    "system__subMenu": {},

    "feedback__title": "Feedback",
    "feedback__subMenu": {},

    "users__title": "User",
    "users__subMenu": {},

    "folder__title": "Folder",
    "folder__subMenu": {},

    "androi__title": "Androi",
    "androi__subMenu": {},

    "ios__title": "Ios",
    "ios__subMenu": {}
  }
}

第 4 步：我在 index.js 文件旁邊創建 i18n.js 文件，如下所示：

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LangugeDetector from 'i18next-browser-languagedetector'
import HttpApi from 'i18next-http-backend'

i18n
  .use(LangugeDetector)
  .use(initReactI18next)
  .use(HttpApi)
  .init({
    debug: true,
    interpolation: {
      escapeValue: false
    },
    supportedLngs: ['en', 'vi'],
    lng: 'vi',
    fallbackLng: 'vi',
    detection: {
      order: ['cookie', 'htmlTag', 'localStorage', 'path', 'subdomain'],
      caches: ['cookie']
    },

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

    debug: true
  })

export default i18n

第 5 步：在 index.js 文件中導入 i18n.js

i18next::backendConnector: loading namespace translation for language vi failed failed parsing ../public/locales/vi/translation.json to json

i18next: languageChanged vi
i18next.js:27 i18next: initialized {debug: true, initImmediate: true, ns: Array(1), defaultNS: Array(1), fallbackLng: Array(1), …}

Answer 1

將你的 vi/translation.json 粘貼到這里https://jsonlint.com/並驗證它是否正確 json

還要檢查開發者控制台中的.network請求……可能是路徑不對……