Return type problem

[mazenkhalil]

🐛 Bug Report

Upon updating to v12.0.0 return type issue appears as follows:

As you can see, explicitly defining the return type to string | undefined shows an error. But defining the type as string alone doesn't show any error.

Compare that with explicitly defining the value as below, the behavior sounds weird to me.

As you can see here, if the type is string or string | undefined and the value is null, the error appears (expected).

Expected behavior

string | undefined return type should work without issues as it was before updating to v12.0.0.

Your Environment

• runtime version: node v16
• i18next version: v12.0.0
• os: Mac

[adrai]

https://www.i18next.com/overview/typescript#argument-of-type-defaulttfuncreturn-is-not-assignable-to-parameter-of-type-xyz

[mazenkhalil]

Sorry my bad. I had to restart the IDE to reload the configurations.

[eiskalteschatten]

I have been trying to solve this problem all day in my project, but when I follow the instructions linked above, I get these errors:

TS2305: Module '"i18next"' has no exported member 't'.
     1 | import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
   > 2 | import { t } from 'i18next';

TS2339: Property 'use' does not exist on type 'typeof import("/Users/alexseifert/other/typescript-fastify-react-boilerplate/packages/client/src/i18next")'.
      7 |
      8 | i18n
   >  9 |   .use(initReactI18next)
        |    ^^^
     10 |   .init({
     11 |     resources,
     12 |     defaultNS: 'common',

Apparently, I'm missing something since it seems to override all of i18next's typings rather than merge with them. Any ideas? For now, I'm going to have downgrade and keep i18next at a fixed version.

This is the i18next.d.ts within the project:
https://github.com/eiskalteschatten/typescript-fastify-react-boilerplate/blob/main/packages/client/src/i18next.d.ts

[millar]

Hey @eiskalteschatten,

I had the same issue and what worked for me was putting the override in my i18n.ts file like so:

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

declare module 'i18next' {
  interface CustomTypeOptions {
    returnNull: false;
  }
}

i18n
  .use(initReactI18next)
  .init({
    returnNull: false,
  });

export default i18n;

[eiskalteschatten]

Hey @millar,

Thanks for the example. That worked wonderfully for me!

[schaeferCode]

@millar,

Thank you for that example. Worked for me as well. The thing that bothers me now is I don't know why that worked! Can anyone explain why that putting the override in the i18n.ts file fixed the issue when adding a i18next.d.ts file with the same content didn't?

[Wordllban]

@schaeferCode,

I'm not sure, but maybe it's because override from separate file isn't reading in proper order to apply

[OZZlE]

initReactI18next

I don't have any i18n.ts file? Using next.js ...

[adrai]

@OZZlE here an example: https://github.com/i18next/next-i18next/blob/master/examples/simple/%40types/i18next.d.ts

[OZZlE]

Why is this ticket closed, it's still an issue?

[marcus-sa]

I can't get it to work either ...

[adrai]

did you set returnNull: false ?

https://www.i18next.com/overview/typescript#argument-of-type-defaulttfuncreturn-is-not-assignable-to-parameter-of-type-xyz

[marcus-sa]

did you set returnNull: false ?

i18next.com/overview/typescript#argument-of-type-defaulttfuncreturn-is-not-assignable-to-parameter-of-type-xyz

Yeah, I've done it for both react-i18next and i18next.
Both d.ts files are defined in the compilerOptions.types section in my tsconfig.json.

[adrai]

please provide a minimal reproducible example repository

btw: you need to define that in the i18next options and in the i18next type definitions, nit in the compiler options

[adrai]

[marcus-sa]

As I've said, that doesn't fix it.
I worked around it by downgrading i18next and react-i18next.
I'd recommend better DX for this because it seems like A LOT of people are having difficulties with your new API.

[adrai]

@marcus-sa like said: please provide a minimal reproducible example so that can be investigated, like here: https://github.com/i18next/react-i18next/tree/master/example/react-typescript/simple

especially:

react-i18next/example/react-typescript/simple/src/@types/i18next.d.ts

Line 8 in 7c92aa0

// returnNull: false;

and: https://github.com/i18next/react-i18next/blob/master/example/react-typescript/simple/src/i18n/config.ts#L17

beside that, @pedrodurek is currently working on a redesign: i18next/i18next#1911
feel free to help and contribute