TS Error: "Property 'reportNamespaces' is missing"

[fernandocanizo]

Describe the bug

Setting up remix-i18next, by following instructions verbatim from README leaves entry.server.tsx with a Typescript error:

app/entry.server.tsx:44:24 - error TS2741: Property 'reportNamespaces' is missing in type 'import("./node_modules/.pnpm/i18next@23.7.6/node_modules/i18next/index").i18n' but required in type 'import("./node_modules/.pnpm/i18next@23.7.6/node_modules/i18next/index").i18n'.

44       <I18nextProvider i18n={instance}>
                          ~~~~

  node_modules/.pnpm/react-i18next@13.5.0_i18next@23.7.6_react-dom@18.2.0_react@18.2.0/node_modules/react-i18next/index.d.ts:41:5
    41     reportNamespaces: ReportNamespaces;
           ~~~~~~~~~~~~~~~~
    'reportNamespaces' is declared here.
  node_modules/.pnpm/react-i18next@13.5.0_i18next@23.7.6_react-dom@18.2.0_react@18.2.0/node_modules/react-i18next/index.d.ts:157:3
    157   i18n: i18n;
          ~~~~
    The expected type comes from property 'i18n' which is declared here on type 'IntrinsicAttributes & I18nextProviderProps'

This was already reported on issue #163 which was closed without further comments, so I'm reporting it on a new issue to differentiate the case (op on previous issue claims got the error on an update and I'm getting it starting from scratch).

entry.server.tsx is a copy&paste from README.

Your Example Website or App

https://github.com/fernandocanizo/learning-remix-with-i18n

Steps to Reproduce the Bug or Issue

1. pnpx create-remix check-issue
2. Setup your project step-by-step as current README dictates, replacing app/entry.{server,client}.tsx with the code provided in README file.
3. run npm run typecheck

This steps only focus on the reported error and doesn't deal with other issues found with current sample setup and status of the library.

Expected behavior

Expected behavior is to have npm run typecheck run without errors and not have to hunt down Typescript errors from an example code.

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Brave (but it's irrelevant for this bug)
• Version: 5.4.0

Additional context

No response

[fernandocanizo]

Sorry, I misread the error on my editor since it doesn't output the whole error I pasted on the report but just this:

Property 'reportNamespaces' is missing in type 'import("./node_modules/i18next/index").i18n' but required in type 'import("./node_modules/i18next/index").i18n'.

which got me totally puzzled.

I realized this and went upstream to find the issue Type error with i18next@23.7.2+ where @adrai provides a possible solution. [haven't tried it yet]

[fernandocanizo]

ok, the solution is to leave the "moduleResolution": "Bundler", in tsconfig.json (don't change it, as initially suggested in referred issue from react-i18next, to "NodeNext") and force the type on the i18n instance like this: (entry.server.tsx)

import type { i18n as i18nType } from 'i18next';
// ...
const i18nInstance = createInstance() as i18nType;

I guess this was the path @stevensacks followed on issue 163 and that's why he closed it. I hope the next one stomping on this one doesn't loose an hour hunting the solution ;)

[HerrBertling]

@fernandocanizo Ha, thank you so much! 🙌