i18next::translator: missingKey

[alakdam07]

In my Reactapp. I have created two language options in json format. That worked fine. For testing i18next, how the logic works I put the the language options inside one json object. After that I am getting error: i18next::translator: missingKey en translations welcome welcome.
I am sharing my code in codesandbox.

This json format works the i18 translation

`{

"en": {
  "translations": {
    "To get started, edit <1>src/App.js</1> and save to reload.": "To get started, edit <1>src/App.js</1> and save to reload.",
    "welcome": "Welcome to React and react-i18next"
  }
},
"de": {
  "translations": {
    "To get started, edit <1>src/App.js</1> and save to reload.": "Starte in dem du, <1>src/App.js</1> editierst und speicherst.",
    "welcome": "Willkommen bei React und react-i18next"
  }
}

}`

But with json format it does not work

{ "dashboad": { "en": { "translations": { "To get started, edit <1>src/App.js</1> and save to reload.": "To get started, edit <1>src/App.js</1> and save to reload.", "welcome": "Welcome to React and react-i18next" } }, "de": { "translations": { "To get started, edit <1>src/App.js</1> and save to reload.": "Starte in dem du, <1>src/App.js</1> editierst und speicherst.", "welcome": "Willkommen bei React und react-i18next" } } } }

This is my i18 file

`import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import tran from "./tran.json";
i18n.use(LanguageDetector).init({

resources: tran,
fallbackLng: "en",
debug: true,

ns: ["translations"],
defaultNS: "translations",

keySeparator: false,

interpolation: {
escapeValue: false,
formatSeparator: ","
},
missingKeyHandler: true,
react: {
wait: true
}
});

export default i18n;`

[adrai]

your json is not correct.

Check this: https://codesandbox.io/s/i18nextreact-i18next-forked-mqkjb?file=/src/tran.json

[alakdam07]

Thank you for such a quick reply. why it does not work with this format:

{ "dashboad": { "en": { "translations": { "To get started, edit <1>src/App.js</1> and save to reload.": "To get started, edit <1>src/App.js</1> and save to reload.", "welcome": "Welcome to React and react-i18next" } }, "de": { "translations": { "To get started, edit <1>src/App.js</1> and save to reload.": "Starte in dem du, <1>src/App.js</1> editierst und speicherst.", "welcome": "Willkommen bei React und react-i18next" } } } }

[adrai]

Because it's not a valid i18next json structure

[jamuhl]

Structure is depending on loading via fetch or adding to resources, read: https://www.i18next.com/how-to/add-or-load-translations

there is no structure that has dashboard -> lng -> ns -> keys

adding via resources it is: lng -> ns -> keys
loading via backend it is: keys (as lng, ns comes from loading params)

[alakdam07]

Thank you

[adrai]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

There are many ways to help this project 🙏