next-i18next: Typing error with React 18

Describe the bug

NextJS build is failing with React 18 and usage of <Trans> component.

Occurs in next-i18next version

11.0.0

Steps to reproduce

info  - Loaded env from /.env
Failed to compile.

./src/components/Component.tsx:179:56
Type error: Type '{ freeDays: number; }' is not assignable to type 'ReactNode'.
  Object literal may only specify known properties, and 'freeDays' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal'.

  177 |                     <Trans i18nKey="subscribe.freeDays">
  178 |                       You get
> 179 |                       <span className="family-bold">{{ freeDays }}</span>
      |                                                        ^
  180 |                       &nbsp;starting today
  181 |                     </Trans>
  182 |                   </p>
info  - Checking validity of types .%

Expected behaviour

No typing errors when using variables in Trans component

OS (please complete the following information)

Device: MBP 2019 16
Browser: Chrome 100.0.4896.127

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 18 (10 by maintainers)

Most upvoted comments

@pedrodurek Unfortunately, still not working !

It overrides React own definition types, so I’ve got an error like :

Type error: Module '"react"' has no exported member 'useEffect'.

  3 | import Head from 'next/head';
  4 | import Link from 'next/link';
> 5 | import React, { useEffect } from 'react';
    |                 ^
  6 | import StaticPageManager from 'src/containers/StaticPageManager';
  7 | import { captureError } from 'src/utils/sentry/error-handler';
  8 | import NoHeaderFooterLayout from '../Layout/NoHeaderFooter';

I’ve searched and tried to fix this, changing d.ts file :

import React from 'react';

type ReactI18NextChild = React.ReactNode | Record<string, unknown>;

declare global {
  namespace React {
    interface HTMLAttributes<T> {
      children?: ReactI18NextChild | Iterable<ReactI18NextChild>;
    }
  }
}

Declare file into tsconfig.json (both include and typeRoots properties), changing file name but it continues to override base types.

azuken on Jul 19, 2022

@pedrodurek can you help…? There is probably a bit of confusion.

adrai on Jul 18, 2022

yeah @adrai, that’s correct! allowObjectInHTMLChildren will allow all html elements to accept object as children.

pedrodurek on Jul 13, 2022

@azuken would such a TypeScript option like allowObjectInHTMLChildren work for you? Please comment here: https://github.com/i18next/react-i18next/issues/1483 And maybe check also this PR: https://github.com/i18next/react-i18next/pull/1492 @isaachinman if you have some inputs regarding that, let us know…

adrai on May 2, 2022

Typings for the Trans component come from react-i18next, not this package. Please open an issue there.

isaachinman on May 2, 2022