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

Problem

loading namespace translation for language vi failed failed . . .

What I did

step 1: npx create-react-app AwesomeProject

step 2: npm install i18next 18next-browser-languagedetector 18next-http-backend react-i18next

step 3: I create "en" and "vi" folders in public/locales

The json file in public/locales/en/translation.js like this:

{
  "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": {}
  }
}

step 4: I create i18n.js file byside index.js file like this:

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

step 5: import i18n.js in index.js file

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), …}

Solution 1:^[1]

Paste your vi/translation.json in here https://jsonlint.com/ and validate it to see if it is a correct json

Also check the network request in the developer console… it might be the path is not correct…

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

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

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]