import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";
import common from "../public/locales/en-GB/common.json";
import login from "../public/locales/en-GB/login.json";
import signup from "../public/locales/en-GB/signup.json";
export const defaultNS = "common";
export const resources = {
 en: {
 common,
 login,
 signup,
 },
} as const;
i18n
 .use(Backend)
 .use(LanguageDetector)
 .use(initReactI18next)
 .init({
 lng: "en-GB",
 fallbackLng: "en-GB",
 ns: Object.keys(resources.en),
 defaultNS: defaultNS,
 interpolation: {
 escapeValue: false,
 },
 });
export default i18n;

Assets in public directory cannot be imported from JavaScript.
If you intend to import that asset, put the file in the src directory, and use /src/locales/en-GB/common.json instead of /public/locales/en-GB/common.json.
If you intend to use the URL of that asset, use /locales/en-GB/common.json?url.
Assets in public directory cannot be imported from JavaScript.