search

okonet / react-scroll-sync

Synced scroll position across multiple scrollable elements
http://react-sync-scroll.netlify.com/
MIT License
426 stars 59 forks source link

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

Open HT-Moh opened 10 months ago

HT-Moh commented 10 months ago

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 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.

okonet commented 10 months ago

Feel free to create a PR with a fix. I'd confirm if it's not a usage / next.js related issue though.