react-scroll-sync
react-scroll-sync copied to clipboard
TypeScript Error: 'ScrollSync' cannot be used as a JSX component
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.