react-i18next: Typescript error when using variables in Trans component

I’m experiencing something similar:

const title = `${title} something`
return (
    <Trans i18nKey="myKey">
        Edit <span style={{color: '#40a9ff'}}>{{title}}</span>
    </Trans>
)
// where myKey=Edit Entity<1>{{title}}</1>

yields: TS2322: Type '{ title: string; }' is not assignable to type 'ReactNode'.   Object literal may only specify known properties, and 'title' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal'.

I found an solution for this, you can pass values to Trans component like this:

      <Trans values={{ amount: data.length }}>
        <StringWrapper className="my-class">
          Your count 
        </StringWrapper>
        {data.length} has been counted
      </Trans>

@BrooceLR I tested this, allowObjectInHTMLChildren works like disabling the TypeScript warning globally. It suppresses warnings in all JSX. So this is not a good solution.

@pedrodurek Setting allowObjectInHTMLChildren to true works for me. Thanks.

What is the reason why it is not true by default? Are there any disadvantages?

Wouldn’t that suppress typescript errors on any children prop? Objects are not valid JSX children, meaning that outside Trans components I’d expect it to crash the runtime?

Everyone who is still facing this problem, please set allowObjectInHTMLChildren to true in your react-i18next type declaration file. You can follow the instructions here to learn how to create a type declaration file, it should look similar to this one:

import "react-i18next";
...

declare module "react-i18next" {
  interface CustomTypeOptions {
    allowObjectInHTMLChildren: true, // This property should be true
    defaultNS: "ns1";
    resources: {
      ns1: typeof ...;
    };
  }
}

If the error still persists, please share a minimalistic version of your app (using the Trans component), and I’ll help you.

I’m not a TypeScript user, but if it works like this:

      <Trans>
        <StringWrapper className="my-class">
          Your count 
        </StringWrapper>
        {{ amount: data.length }} has been counted
      </Trans>

it may be your StringWrapper component is doing something that is causing the problem.