TS2786

error TS2786: ‘Component‘ cannot be used as a JSX component.

Broken Code ❌

1
2
3
4
5
6
7
8
9
10
11
12
13

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