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

[HT-Moh]

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.

[okonet]

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

[Baboo7]

This is the type declaration file I created as a quick workaround:

// react-scroll-sync.d.ts

import "react-scroll-sync";
declare module "react-scroll-sync" {
  const ScrollSync: React.FC<ScrollSyncProps>;
  const ScrollSyncPane: React.FC<ScrollSyncPaneProps>;

  export = {
    ScrollSync,
    ScrollSyncPane,
  };
}

[tearfur]

It doesn't look like a problem with this project.

I solved my problem by following the logic described in https://stackoverflow.com/a/71828113/11390656 and added the following to my package.json:

  "resolutions": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.15"
  },

Note: I use yarn. This doesn't apply to npm.