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.