react-i18next: Linting of TFunction fails since the last update

💥 Regression Report

Linting of TFunction fails since the last update. The t function should accept its key parameter to be string | string []. However, it seems to expect to be never.

K seems to resolve to never at https://github.com/i18next/react-i18next/blob/a4aaf65e937e2b5ef021be41d581614a9aa80c73/src/ts4.1/index.d.ts#L91

Last working version

Worked up to version: 11.7.4

Stopped working in version: 11.8.0

To Reproduce

Steps to reproduce the behavior:

import React from 'react'
import { useTranslation } from 'react-i18next/*'

const MyComponent= ()=>{
    const {t} = useTranslation()
    return <span>{t('hello')}</span>
}

export default MyComponent

Expected behavior

I expect to not have Argument of type ‘string’ is not assignable to parameter of type ‘never’.ts(2769) at line 6 for t('hello')

Full error:

error TS2769: No overload matches this call. Overload 1 of 2, ‘(key: never, options?: string | TOptions<StringMap> | undefined): never’, gave the following error. Argument of type ‘string’ is not assignable to parameter of type ‘never’. Overload 2 of 2, ‘(key: never, defaultValue?: string | undefined, options?: string | TOptions<StringMap> | undefined): never’, gave the following error. Argument of type ‘string’ is not assignable to parameter of type ‘never’.

Your Environment

runtime version: node 14.15.1
i18next version: 11.8.0
TypeScript version: 4.1.2
os: Windows with Ubuntu WSL2

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 16
Comments: 21 (10 by maintainers)

Most upvoted comments

Hey guys, I managed to fix the issue. I’m gonna add two examples (with and without namespaces) under examples folder and open a PR.

+11

pedrodurek on Dec 7, 2020

same here: Screenshot 2020-12-07 at 14 52 58

paulrostorp on Dec 7, 2020

I’m not a TS user… others have to say 🤷‍♂️ in the meantime option 3 😉

adrai on Dec 7, 2020

Same here, was looking into failing builds for the past 30 mins. This only seems to be the case in the 4.1 typings, 4.0.x is fine. At least it helped me find out our CI uses a different TS version compared to my local environment 😅

Edit: Can confirm our CI works fine with 4.0.x again, until this issue is resolved.

JeroenReumkens on Dec 7, 2020

Has anyone run into the situation where you’re swapping out the “base” of a key? I’m trying to use TypeScript template strings and this used to work but now requires extra TypeScript casting:

Before:

const i18nBase = isSubmitted ? 'path.to.something.resubmit' : 'path.to.something.submit'
const title = t(`${i18nBase}.title`)

Interpreting the string in this manor fails to compile with errors like No overload matches this call.. I can fix this by casting to a const with:

const i18nBase = isSubmitted ? 'path.to.something.resubmit' : 'path.to.something.submit'
const title = t(`${i18nBase}.title` as const)

but it feels like something that I shouldn’t have to do. Is there a better way to do this? We exercise this pattern quite frequently in our codebase, especially for re-usable components which might be in different states and I was hoping to avoid having to rewrite them all.

Thanks!

joelpoloney on Dec 29, 2020

Hey guys, I managed to fix the issue. I’m gonna add two examples (with and without namespaces) under examples folder and open a PR.

The PR fixed my issue. Thanks!

mxsxs2 on Dec 9, 2020

@adrianolsk Hi, it is this approach/setup that i’m following: https://cansahin.gitbook.io/react-boilerplate-cra-template/building-blocks/i18n They’re converting the translation json into object to take advantage of the intellisense feature

vtrphan on Dec 8, 2020

If any help is needed, you know where to find me 🐅 🎉 😃

tigerabrodi on Dec 7, 2020