TS2786

'Component' cannot be used as a JSX component.

Broken Code ❌

import type { NextPage } from 'next';
import type { AppProps } from 'next/app';
 
type AppPropsWithLayout = AppProps & {
  Component: NextPage & {
    getLayout?: (page: React.ReactElement) => React.ReactNode;
  };
};
 
export default function AdvisoryApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  const getLayout = Component.getLayout ?? ((page) => page);
  return <>{getLayout(<Component {...pageProps} />)}</>;
}

Fixed Code ✔️

Usually the problem derives from a mismatch in @types/react. When you have libraries that are dependent on a specific version of @types/react (i.e. v17.0.47) and you have other libraries working with another major version of @types/react (i.e. v18.0.14), then this can cause compatibility issues when using React.ReactNode or JSX.Element. You have to streamline your dependencies on @types/react, so that these follow the same major version.

You can find all libraries depending on @types/react in your project by executing npm explain @types/react (when a package-lock.json file is present) or yarn why @types/react (when a yarn.lock file is present).