i18next: V12 Type errors with children

In React 18, after updating to v12 and setting up the i18next.d.ts file according to the docs, I am getting a lot of TypeScript errors relating to children in native tags (like <a>) and custom components with children: ReactNode

  • TS2746: This JSX tag’s ‘children’ prop expects a single child of type 'ReactI18NextChild | Iterable ', but multiple children were provided.
  • TS2746: This JSX tag’s ‘children’ prop expects a single child of type ‘ReactI18NextChild | Iterable<ReactI18NextChild>’, but multiple children were provided.
  • TS2322: Types of property ‘children’ are incompatible.     Type ‘ReactI18NextChild | Iterable<ReactI18NextChild>’ is not assignable to type ‘ReactNode’.       Type ‘Record<string, unknown>’ is not assignable to type ‘ReactNode’.         Type ‘Record<string, unknown>’ is missing the following properties from type ‘ReactPortal’: key, children, type, props

How do I resolve these?

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 7
  • Comments: 26 (11 by maintainers)

Most upvoted comments

Hey @pedrodurek, that’s great news. Thank you! 😃

v22.4.5

@pedrodurek any thoughts on the above issue?

Hey @sklawren, do you mean like this?

<a>{t('key')}</a>