Default namespace not working as what I expected

[ngtrthinh169TPC]

I'm sorry that this is not really something contributing to the project. It's only my bad job at setting up but I can't find any helps elsewhere (posted something similar on StackOverflow but no answer). If this is not suitable, please tell me somewhere I can ask this, I'll be delightfully move this question there.

I'm trying to use i18next with create-react-app and set up similar to the official docs of i18next. But my intellisense and typescript doesn't look right.

My translation json en.json:

{
  "example": "text"
}

i18n.d.ts:

import "i18next";
import { resources } from "../i18n";

declare module "i18next" {
  interface CustomTypeOptions {
    resources: (typeof resources)["en"];
  }
}

i18n.ts (since I imported resources from here):

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import en from "./locale/en.json";

export const resources = {
  en: {
    translation: en,
  },
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

I tried to use the t function in my App.tsx:

import "./App.css";
import { useTranslation } from "react-i18next";

const App = () => {
  const { t } = useTranslation();

  return (
    <div className="App">
      {/* This does not work */}
      <p>{t("example")}</p>
      {/* This does not work either */}
      <p>{t("translation.example")}</p>
      {/* This works, but unexpected */}
      <p>{t("translation:example")}</p>
    </div>
  );
};

export default App;

As far as I know, i18next has the default namespace of translation, so I should not need to provide that namespace on usage.
Actually I think it was ok to add that namespace, so I tried to add it to the t function:

  const { t } = useTranslation("translation");

But it doesn't change anything of intellisense and typescript error.

For context, I'm using latest version for the time being: i18next v23.7.6, react-i18next v13.5.0, typescript v5.2.2

I want to know why and how this interaction work, since I'm working with some legacy code and cannot overhaul the whole thing (beforehand it doesn't use typescript and has an older version of i18next).

Edit: My minimal reproduction of what I'm doing: https://github.com/ngtrthinh169TPC/rep-i18next-ts . Without context of the legacy code, the interaction is still the same.

Edit 2: As a side note: my t function returns type never, so I really think that I'm doing the set up wrong somewhere.

[adrai]

https://github.com/ngtrthinh169TPC/rep-i18next-ts/pull/1/files

[adrai]

react-scripts seems to require ts 4.x

[adrai]

Can you downgrade ts to v4?

[ngtrthinh169TPC]

It seems that we'll have to find a way to work around with react-scripts.
I'd be thankful if you have any recommendations to solve this, but hey, it's javascript, can't expect everything to work harmonically.

I'll update as soon as I can find anything. Thank you for your time.

[ngtrthinh169TPC]

I'll try that one

[ngtrthinh169TPC]

Tried replicate your example above with typescript 4.9.5. Both npm and yarn worked.
Any conclusions from your side? Since I'm really curious about what's going on here

[adrai]

That's the problem:

[ngtrthinh169TPC]

Thank you very much. It solves my problem completely. I'll suggest marking this a warning rather than information, since it's important to not skip.
Or it was just empty-minded me.