react-scroll-sync icon indicating copy to clipboard operation
react-scroll-sync copied to clipboard

TypeScript Error: 'ScrollSync' cannot be used as a JSX component

Open HT-Moh opened this issue 1 year ago • 1 comments

Description

Issue I am encountering a TypeScript error when trying to use ScrollSync from react-scroll-sync in my Next.js project. The error states that ScrollSync's type FC<ScrollSyncProps> is not a valid JSX element type.

Error Message

python

'ScrollSync' cannot be used as a JSX component.
  Its type 'FC<ScrollSyncProps>' is not a valid JSX element type.
    Type 'FunctionComponent<ScrollSyncProps>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'import("/home/bicatalyst/src/profiler/nextjs/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)
index.d.ts(175, 9): 'children' is declared here.

Environment

Next.js version: 13.4.12 React version: 18.2.0 TypeScript version: 5.1.6 react-scroll-sync version: 0.11.0 @types/react-scroll-sync version: 0.8.7

Expected Behavior

ScrollSync should be usable as a JSX component without any TypeScript errors.

Actual Behavior

TypeScript throws an error indicating a type mismatch or incompatibility when using ScrollSync as a JSX component.

HT-Moh avatar Dec 05 '23 10:12 HT-Moh