Can't do module augmentation with typescript

Question

I just followed the instructions to add proper typings to my react-i18next instance as outlined here: https://react.i18next.com/latest/typescript#create-a-declaration-file

However, after creating the mentioned react-i18next.d.ts file I am starting to get errors about unexported members of the module react-i18next, like for example useTranslation hook:

Module '"react-i18next"' has no exported member 'useTranslation'.ts(2305)

Here is the content of my react-i18next.d.ts file

// import the original type declarations
import 'react-i18next';
// import all namespaces (for the default language, only)
import translation from 'locales/en/translation.json';
import toast from 'locales/en/toasts.json';

// react-i18next versions lower than 11.11.0
declare module 'react-i18next' {
  // and extend them!
  interface Resources {
    translation: typeof translation;
    toast: typeof toast;
  }
}

declare module 'react-i18next' {
  // and extend them!
  interface CustomTypeOptions {
    // custom namespace type if you changed it
    defaultNS: 'translation';
    // custom resources type
    resources: {
      translation: typeof translation;
      toast: typeof toast;
    };
  }
}

I'm using [email protected]

Answer 1

For some reason, seems that the type definition file and the actual source code that uses it can not live on the same folder. I just moved the types definition file to a types folder, which is latter included on tsconfig.json and it now works perfectly:

// tsconfig file
"include": ["./src/**/*", "./types"],

root/
├─ src/
├─ types/
│  ├─ react-i18next.d.ts
├─ tsconfig.json