I’m integrating i18next in my Next app by following this tutorial https://i18nexus.com/tutorials/nextjs/react-i18next and all the steps seem to be working as expected until I added the i18n.ts file in the app directory:

import { createInstance } from "i18next";
import { initReactI18next } from "react-i18next/initReactI18next";
import resourcesToBackend from "i18next-resources-to-backend";
import { i18nConfig } from "@/config/i18Config";

export default async function initTranslations(
  locale: string,
  namespaces: string[],
  i18nInstance?: any,
  resources?: any
) {
  i18nInstance = i18nInstance || createInstance();

  i18nInstance.use(initReactI18next);

  if (!resources) {
    i18nInstance.use(
      resourcesToBackend((language: "en" | "ar", namespace: string) => {
        return import(`@/locales/${language}/${namespace}.json`);
      })
    );
  }

  await i18nInstance.init({
    lng: locale,
    resources,
    fallbackLng: i18nConfig.defaultLocale,
    supportedLngs: i18nConfig.locales,
    defaultNS: namespaces[0],
    fallbackNS: namespaces[0],
    ns: namespaces,
    preload: resources ? [] : i18nConfig.locales,
  });

  return {
    i18n: i18nInstance,
    resources: i18nInstance.services.resourceStore.data,
    t: i18nInstance.t,
  };
}

I’m getting a Module not found error in the return clause of resourcesToBackend function and I’m not sure how to fix this.

I have the locales file in my src/ directory and I have the paths configured in tsconfig.json as

"paths": {
      "@/*": ["./src/*"]
    }

I also added the following config in next.config as suggested by GPT:

webpack: (config) => {
    config.resolve.alias["@"] = path.resolve(__dirname, "src");
    return config;
  },

Nothing seems to fix the dynamic import error.