useTranslation Hook not showing autocomplete for Next.js (TS)

[abdulrahimiliasu]

When importing useTranslation hook from next-18next module, it does not provide autocompletion (types), however when imported from react-i18next it does show autocomplete suggestions. So why don't I use react-i18next instead right ? well the problem is useTranslation hook imported from react-i18next does not show the content on the page, however next-18next does.

here is my i18next.d.ts living in my types folder

/**
 * If you want to enable locale keys typechecking and enhance IDE experience.
 *
 * Requires `resolveJsonModule:true` in your tsconfig.json.
 *
 * @link https://www.i18next.com/overview/typescript
 */
import "i18next";

import type common from "../../public/locales/en/common.json";
import type main from "../../public/locales/en/main.json";
import type index from "../../public/locales/en/index.json";
import type login from "../../public/locales/en/login.json";
import type signup from "../../public/locales/en/signup.json";

interface I18nNamespaces {
    common: typeof common;
    main: typeof main;
    index: typeof index;
    login: typeof login;
    signup: typeof signup;
}

declare module "i18next" {
    interface CustomTypeOptions {
        defaultNS: "common";
        resources: I18nNamespaces;
    }
}

and here is my index.ts page for example

import { useTranslation } from "next-i18next"; // works but no autocomplete
// import { useTranslation } from "react-i18next"; // does not show content instead ( e.g common:login) but  autocomplete exist


type PageProps = {};

export default function Home({}: InferGetServerSidePropsType<GetServerSideProps>) {
    const { t } = useTranslation(["common", "index"]);

    return (
        <div>
            <TitleText>{strings.app_name}</TitleText>
            <ThemeSwitcher variant="multiple" />

            <Link href={"/login"}>
                <u>{t("common:login")}</u>
            </Link>
            <br />
            <Link href={"/signup"}>
                <u>{t("common:create-an-account")}</u>
            </Link>
        </div>
    );
}

export const getServerSideProps: GetServerSideProps<PageProps> = async ({ locale }) => {
    return {
        props: {
            ...(await serverSideTranslations(locale ?? "en", ["common", "index"])),
        },
    };
};

Please any help or suggestion will be appreciated

[belgattitude]

Upcoming release only (v13.0.0). In the meantime

import "react-i18next"; // (in the future 'i18next')

import type common from "../../public/locales/en/common.json";
import type main from "../../public/locales/en/main.json";
import type index from "../../public/locales/en/index.json";
import type login from "../../public/locales/en/login.json";
import type signup from "../../public/locales/en/signup.json";

interface I18nNamespaces {
    common: typeof common;
    main: typeof main;
    index: typeof index;
    login: typeof login;
    signup: typeof signup;
}

// (was 'i18next')
declare module "react-i18next" {
    interface CustomTypeOptions {
        defaultNS: "common";
        resources: I18nNamespaces;
    }
}

When 13.0.0 is out, you'll have to change once more :) See UPGRADING.

Let me know if it helped

[belgattitude]

Ok that's something. Tried to test on my example repo and can't reproduce.

Both

import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';

Works (on v13.0.0).

(from nextjs-monorepo-example)

That said, I feel if you were on v12 there's another hypothesis. Your package manager has updated or has duplicates of react-i18next>22 and i18next>12 (you can check in the lock file). See also: https://github.com/i18next/next-i18next/blob/master/TROUBLESHOOT.md#how-to-debug-installation

Note that the possibility of duplicates is better handled in v13.0.0.

Could you try an upgrade ? https://github.com/i18next/next-i18next/releases/tag/v13.0.0

[abdulrahimiliasu]

Oh I forgot to mention, I'm currently on v12. my Package.json file

"dependecies" : 
{
       "i18next": "^22.0.6",
        "next": "13.0.0",
        "next-i18next": "^12.1.0",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-i18next": "^12.0.0"
}

[belgattitude]

Then that makes sense. You'll probably have i18next installed twice (21.x and 22.x), same for react-i18next. And that will create issues.

Let me know if it still happen when upgrading "next-i18next": "^13.0.0". Hope it will solve it

[abdulrahimiliasu]

Wow, that literally solved everything 😄 , Thanks a lot 👍

[belgattitude]

Top 😄