TypeScript Error: 'MentionsInput' and 'Mention' Components Not Compatible as JSX Elements

[haslam790]

Steps to reproduce:

1. Set up a TypeScript React project with the MentionsInput and Mention components.
2. Attempt to use the MentionsInput and Mention components within a .tsx file.
3. Compile the project using tsc or run the app.
4. Observe the error in the terminal/logs.

Expected behaviour:
MentionsInput and Mention should render without any TypeScript errors.
Observed behaviour:
TypeScript throws the following errors:

Error TS2786: 'MentionsInput' cannot be used as a JSX component.

Explanation: Its type 'MentionsInputClass' is not a valid JSX element type.
Details: Type 'ComponentClass<MentionsInputProps, any>' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'. Property 'refs' is missing in type 'Component<MentionsInputProps, any, any>' but required in type 'Component<any, any, any>'.
Error TS2786: 'Mention' cannot be used as a JSX component.

Explanation: Its type `'FC' is not a valid JSX element type.
Details: Type 'FunctionComponent' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Workaround:
No workaround identified as of now.

[prithwish-witbybit]

I'm facing the same issue. Is there any update?

[ebarthur]

Did you find a solution? Or at least an alternative? @prithwish-witbybit

[prithwish-witbybit]

Yes, I'm creating a new variable and changing the component type to any. Then using that component in JSX

[hbmartin]

This package looks abandon but I am working to resurrect with a modern rewrite - fully rewritten in TS.
You can try it today (but it's not 💯 and I'm still evolving it):
https://github.com/hbmartin/react-mentions-ts