Component can not be used as JSX component

I actually build a a small app with React and Typescript.

Today, I installed a library called ‘react-tweet’. When I use it locally, everything works fine, but when I deploy my application, I get this error

src/container/info-personnage/info-personnage.tsx(9,12): error TS2786: 'Tweet' cannot be used as a JSX component.
  Its return type 'string | number | boolean | Element | Iterable<ReactNode> | null' is not a valid JSX element.
    Type 'string' is not assignable to type 'ReactElement<any, any>'.
src/container/info-personnage/info-personnage.tsx(12,12): error TS2786: 'Tweet' cannot be used as a JSX component.
  Its return type 'string | number | boolean | Element | Iterable<ReactNode> | null' is not a valid JSX element.
src/container/info-personnage/info-personnage.tsx(15,12): error TS2786: 'Tweet' cannot be used as a JSX component.
  Its return type 'string | number | boolean | Element | Iterable<ReactNode> | null' is not a valid JSX element.
src/container/info-personnage/info-personnage.tsx(18,12): error TS2786: 'Tweet' cannot be used as a JSX component.
  Its return type 'string | number | boolean | Element | Iterable<ReactNode> | null' is not a valid JSX element.
src/container/info-personnage/info-personnage.tsx(21,12): error TS2786: 'Tweet' cannot be used as a JSX component.
  Its return type 'string | number | boolean | Element | Iterable<ReactNode> | null' is not a valid JSX element.
src/container/info-personnage/info-personnage.tsx(24,12): error TS2786: 'Tweet' cannot be used as a JSX component.
  Its return type 'string | number | boolean | Element | Iterable<ReactNode> | null' is not a valid JSX element.
src/container/info-personnage/info-personnage.tsx(27,12): error TS2786: 'Tweet' cannot be used as a JSX component.
  Its return type 'string | number | boolean | Element | Iterable<ReactNode> | null' is not a valid JSX element.
src/container/info-personnage/info-personnage.tsx(30,12): error TS2786: 'Tweet' cannot be used as a JSX component.
  Its return type 'string | number | boolean | Element | Iterable<ReactNode> | null' is not a valid JSX element.
src/container/info-personnage/info-personnage.tsx(33,12): error TS2786: 'Tweet' cannot be used as a JSX component.
  Its return type 'string | number | boolean | Element | Iterable<ReactNode> | null' is not a valid JSX element.
 ELIFECYCLE  Command failed with exit code 2.
Error: Command "pnpm run build" exited with 1

My code (not really my code but a exemple ^^) :

import { Tweet } from "react-tweet";
import style from "./style.module.css";
export default function InfoPersonnage() {
  return (
    <div>
      <h1>Info personnage</h1>
      <div className={style["total"]}>
        <div className={style["tweet"]} >
          <Tweet id="1681979963266719744" />
        </div>
        <div className={style["tweet"]} data-theme="dark">
          <Tweet id="1681980391597436928" />
        </div>
        <div className={style["tweet"]} data-theme="dark">
          <Tweet id="1681981217841790976" />
        </div>
        <div className={style["tweet"]} data-theme="dark">
          <Tweet id="1681982322923520000" />
        </div>
        <div className={style["tweet"]} data-theme="dark">
          <Tweet id="1681982956468936705" />
        </div>
        <div className={style["tweet"]} data-theme="dark">
          <Tweet id="1681983370023018497" />
        </div>
        <div className={style["tweet"]} data-theme="dark">
          <Tweet id="1682678885127983106" />
        </div>
        <div className={style["tweet"]} data-theme="dark">
          <Tweet id="1705892104432484515" />
        </div>
        <div className={style["tweet"]} data-theme="dark">
          <Tweet id="1706252551908200498" />
        </div>
      </div>
    </div>
  );
}

Declaration file from the librarie :

import { type ReactNode } from 'react';
import { type TwitterComponents } from './twitter-theme/components.js';
import { type TweetCoreProps } from './utils.js';
export type TweetProps = Omit<TweetCoreProps, 'id'> & {
    fallback?: ReactNode;
    components?: TwitterComponents;
    fetchOptions?: RequestInit;
} & ({
    id: string;
    apiUrl?: string;
} | {
    id?: string;
    apiUrl: string | undefined;
});
export declare const Tweet: ({ id, apiUrl, fallback, components, fetchOptions, onError, }: TweetProps) => string | number | boolean | Iterable<ReactNode> | import("react").JSX.Element | null;

I really can’t find from where the issue come.
If someone has a idea, thanks.

  • Wouldn’t it be easier to just use ReactNode?

    – 

  • Mmh ? Not sure what you mean

    – 

  • If there’s a bug in the library you’re using, do you intend to fix the bug in the library? Perhaps you should just report a bug? I’m guessing the issue i sthat it shouldn’t return a boolean.

    – 




Leave a Comment