react i18next throws translator missingKey en translation and useTranslation() hooks not working

I am setting up the react-i18n-next hook to translate my app and i followed the example that the react-i18n-next use but it throws error like below:

i18next::translator: missingKey
en-US
translation

App.js

import React, { Component, Suspense } from "react";
import { useTranslation, withTranslation, Trans } from "react-i18next";

// use hoc for class based components
class LegacyWelcomeClass extends Component {
  render() {
    const { t } = this.props;
    return <h2>{t("title")}</h2>;
  }
}
const Welcome = withTranslation()(LegacyWelcomeClass);

// Component using the Trans component
function MyComponent() {
  return <Trans i18nKey="description.part1" />;
}

// page uses the hook
function Page() {
  const { t, i18n } = useTranslation();

  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <div className="App-header">
        <Welcome />
        <button type="button" onClick={() => changeLanguage("de")}>
          de
        </button>
        <button type="button" onClick={() => changeLanguage("en")}>
          en
        </button>
      </div>
      <div className="App-intro">
        <MyComponent />
      </div>
      <div>{t("description.part2")}</div>
    </div>
  );
}

// loading component for suspense fallback
const Loader = () => (
  <div className="App">
    <div>loading...</div>
  </div>
);

// here app catches the suspense from page in case translations are not yet loaded
export default function App() {
  return (
    <Suspense fallback={<Loader />}>
      <Page />
    </Suspense>
  );
}

i18n.js

import i18n from "i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

i18n
  .use(Backend)

  .use(LanguageDetector)

  .use(initReactI18next)

  .init({
    fallbackLng: "en",
    debug: true,

    interpolation: {
      escapeValue: false // not needed for react as it escapes by default
    }
  });

export default i18n;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

// import i18n (needs to be bundled ;))
import "./i18n";

ReactDOM.render(<App />, document.getElementById("root"));

sample code available here and I don't know what I am missing, It would be better to get some basic working example,s and any help on this really helpful.

My requirement is, I need to translate my app to some other language like from en to fr, the only context I have is en file.

Solution

There are certain things you need to do in the above code

First of all you need to make two translation files, in which you are missing some keys and their values.

let suppose translationEN.json -

{
  "title": "Title",
  "Welcome to React": "Welcome to React and react-i18next",
  "description": {
    "part2": "some description"
  }
}

and translationDE.json -

{
  "title": "DE ***** Title",
  "Welcome to React": "DE  **** Welcome to React and react-i18next",
  "description": {
    "part2": "DE  **** some description"
  }
}

Import the above files in i18n.js and Add resources and lng in i18n init

 import translationEN from "../src/translationEN.json";
 import translationDE from "../src/translationDE.json";

 const resources = {
   en: {
     translation: translationEN
   },
   de: {
     translation: translationDE
   }
 };

 i18n
  .use(Backend)    
  .use(LanguageDetector)    
  .use(initReactI18next)    
  .init({
   resources,
   lng: "en",

Solution is added here