React Vite中使用i18n库出现missingKey报错的问题求助

控制台报错：

i18next::translator: missingKey en translation suche suche

项目文件结构 #

vite.config.ts
i18n.js
test/
src/
  components/InputSearch.tsx
  routes/
public/
  de/translation.json
  en/translation.json

翻译文件内容 #

de/translation.json #

{
  "suche": "Suche"
}

en/translation.json #

{
  "suche": "Search"
}

i18n配置代码（i18n.js） #

import i18n from "i18next";
import Backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";
i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    debug: true,
    backend: {
      loadPath: "/locales/{{lng}}/{{ns}}.json",
    },
    interpolation: {
      escapeValue: false,
    },
    fallbackLng: "en",
  });

export default i18n;

组件调用代码（InputSearch.tsx） #

import { useTranslation } from "react-i18next";
export const InputSearch = () => {
  const { t, i18n } = useTranslation();

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

  return (
    <div className="flex flex-row gap-4 p-4 justify-center">
      <input
        type="text"
        className="input input-bordered w-1/5"
      />
      <button onClick={() => changeLanguage("de")} className="btn bg-secondary">
        {t("suche")}
      </button>
      <button onClick={() => changeLanguage("en")} className="btn bg-secondary">
        {t("suche")}
      </button>
      <input
        disabled
        type="text"
        className="input input-bordered w-full"
      />
    </div>
  );
};

恳请帮忙排查问题，非常感谢！

内容的提问来源于stack exchange，提问作者rowen