i18next module does not compile within React-Typescript application

Question

I have a React-Typescript application and had recently configured i18next setup for multi-language support. I believe all of the setups have been done correctly by following the guidelines of the official documentation. However, when I run the app, it gives me a bunch of compilation errors, such as;

Property 'changeLanguage' does not exist on type 'typeof import("...some_path_info.../node_modules/i18next/index")'.

or

Module '"i18next"' has no exported member 'Module'

I tried a bunch of different tsconfig.json configurations, such as including the type definition file from the node_modules folder of i18next, and other things, but none of them solved the issue, here is the current version of my tsconfig.json file;

"include": ["src"],
  "compilerOptions": {
    "target": "ES2019",
    "lib": ["esnext", "dom", "dom.iterable"],
    "importHelpers": true,
    "declaration": true,
    "sourceMap": true,
    "rootDir": "./src",
    "baseUrl": "." /* Specify the base directory to resolve non-relative module names. */,
    "paths": {
      "libdefs/*": ["src/libdefs/*"]
    },
    "strict": false,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "moduleResolution": "node",
    "jsx": "react",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "downlevelIteration": true,
    "resolveJsonModule": true
  }
}

After spending lots of time searching and testing, I found a way to make it work, and can lead me to the real solution, however, I still couldn't figure it out. The thing is, when I go to the node_modules folder of the i18next, the default file structure looks like this;

Within this package, when I tried to move the index.d.ts type definition file inside the dist folder and then build my project, everything started to work magically without any further configuration or change. However, obviously, it is not a permanent solution.

Finally, I need a permanent solution to this problem, and my last finding about manipulating the package folder of i18next can give some hints.

Here are the versions for related packages;

"i18next": "^22.0.6",
"react-i18next": "^12.0.0",

Thanks.

Answer 1

I think the package that you used is not using in React.js that is for Next.js. I suggest using React-intl package for supporting multi language in react applications. React-intl documentation

and also have a look on this blog which done localization using react-intl React i18n: A step-by-step guide to React-intl