Next.js: 'Component' cannot be used as a JSX component [duplicate]

Question

Why do I get error in this line?

<Provider store={store}>{getLayout?(<Component {...pageProps} />)}</Provider>

(parameter) Component: NextComponentType<NextPageContext, any, {}> & NextPageWithLayout
'Component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<{}, any, any>' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass'.
      Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/@types/styled-jsx/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

Full component:

import axios from 'axios'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
import { ReactElement, ReactNode, useEffect } from 'react'
import { Provider } from 'react-redux'
import Layout from '../components/Layout'
import { setAuthnRes } from '../slices/User'
import { store } from '../store'
import '../styles/globals.scss'
import { baseURL } from '../utils/baseURL'

type NextPageWithLayout = NextPage & {
    getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
    Component: NextPageWithLayout
}

axios.defaults.baseURL = baseURL(
    process.env.NEXT_PUBLIC_ENVIRONMENT ?? 'local',
    true
)

axios.defaults.withCredentials = true

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
    const dispatch = store.dispatch
    const authnUserResp = store.getState().authnUser?.resp

    useEffect(() => {
        if (!authnUserResp) {
            axios({
                method: 'get',
                url: 'me',
                headers: { crossDomain: true },
            }).then((res) => {
                dispatch(setAuthnRes(res.data))
            })
        }
    })

    const getLayout = Component.getLayout ?? ((page) => <Layout>{page}</Layout>)

    return (
        <Provider store={store}>{getLayout?(<Component {...pageProps} />)}</Provider> // <--- HERE
    )
}

export default MyApp

I upgraded Next.js to the most recent one, maybe that causes some issue?

"next": "12.1.0",

Do I need both normal and TypeScript reference in package.json, do you know?

"@types/next": "^9.0.0",
"next": "12.1.0",

Answer 1

I fixed that by deleting yarn.lock file. There was issues with types across packages versions.

"preinstall": "npx npm-force-resolutions" "@types/react": "17.0.30"