Typescript error on React 18 (Property 'children' does not exist on type)

[magnattic]

Typescript complains once you update to React 18, because children now have to be listed explicitely on component props.

The error is this:

No overload matches this call.
  Overload 1 of 2, '(props: TooltipProps | Readonly<TooltipProps>): Tooltip', gave the following error.
    Type '{ children: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null; ... 5 more ...; content: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Tooltip> & Readonly<TooltipProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Tooltip> & Readonly<TooltipProps>'.
  Overload 2 of 2, '(props: TooltipProps, context: any): Tooltip', gave the following error.
    Type '{ children: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null; ... 5 more ...; content: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Tooltip> & Readonly<TooltipProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Tooltip> & Readonly<TooltipProps>'.

19     <TooltipLite

My code:

    <TooltipLite
      className={classnames(styles.target, className)}
      mouseOutDelay={200}
      tipContentClassName={styles.tooltip}
      arrowSize={8}
      padding="7px 14px"
      content={<div className={styles.container}>{content}</div>}>
      {children}
    </TooltipLite>

[yisheng90]

I am facing the same issues. It seems like the library is not ready to support react v18 yet.

One of teh workaround I did is create a type declaration file index.d.ts with the following code to overwrite the type.

import { ReactNode } from 'react';
import { TooltipProps as Props } from 'react-tooltip-lite';

declare module 'react-tooltip-lite' {
  export interface TooltipProps extends Props {
    children: ReactNode;
  }
}

[imamabdulazis]

I am facing the same issues. It seems like the library is not ready to support react v18 yet.

One of teh workaround I did is create a type declaration file index.d.ts with the following code to overwrite the type.

import { ReactNode } from 'react';
import { TooltipProps as Props } from 'react-tooltip-lite';

declare module 'react-tooltip-lite' {
  export interface TooltipProps extends Props {
    children: ReactNode;
  }
}

Thanks for your workaround, I have a similar problem with another library, this should be a good solution for now. Since the library is not supported react v18 yet.

[VladBrok]

I am facing the same issues. It seems like the library is not ready to support react v18 yet.

One of teh workaround I did is create a type declaration file index.d.ts with the following code to overwrite the type.

import { ReactNode } from 'react';
import { TooltipProps as Props } from 'react-tooltip-lite';

declare module 'react-tooltip-lite' {
  export interface TooltipProps extends Props {
    children: ReactNode;
  }
}

this workaround produces an erorr :( Type error: Type 'TooltipProps' recursively references itself as a base type.

[VladBrok]

I am facing the same issues. It seems like the library is not ready to support react v18 yet. One of teh workaround I did is create a type declaration file index.d.ts with the following code to overwrite the type.

import { ReactNode } from 'react';
import { TooltipProps as Props } from 'react-tooltip-lite';

declare module 'react-tooltip-lite' {
  export interface TooltipProps extends Props {
    children: ReactNode;
  }
}

this workaround produces an erorr :( Type error: Type 'TooltipProps' recursively references itself as a base type.

I found out that in new typescript versions you just need to export a TooltipProps without extending it like so:

import { ReactNode } from 'react';

declare module 'react-tooltip-lite' {
  export interface TooltipProps {
    children: ReactNode;
  }
}