22

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",
János
  • 32,867
  • 38
  • 193
  • 353
  • 2
    Have you tried this solution https://github.com/facebook/react/issues/24304#issuecomment-1092563688 – magento2new Apr 11 '22 at 09:52
  • I could be wrong but aren't you using the ternary operator wrong? `{getLayout?()}` after the `Component` you're not providing the else case. `getLayout ? : null` – frostzt Apr 12 '22 at 10:16
  • The error was the backend was not operational, and frontend raise strange errors. Server side rendering was not able to get data. So error is totally different what I was expecting. – János Apr 13 '22 at 22:16
  • I had the same problem, I solved it by updating the packages to the versions: ```next@latest```, ```react@latest```, ```react-dom@latest``` – MarcosSantosDev Apr 28 '22 at 14:54
  • 1
    yarn add @types/react@latest @types/react-dom@latest --dev – Hamid Mohamadi Apr 06 '23 at 00:07
  • This is not a duplicate, and the answer in the other SO post is not correct given this context. I'm really sick of trigger happy SO mods going around marking everything as dupes. I'm sure that's gratifying for them, makes them feel productive and useful to the community, but the behavior needs to stop. – John Miller Jun 27 '23 at 14:09

2 Answers2

20

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"

Jakub Kontra
  • 586
  • 1
  • 5
  • 19
  • Is this the correct way of fixing this issue , https://github.com/facebook/react/issues/24304#issuecomment-1092563688 how about this , how can we use this solution ? – magento2new Apr 11 '22 at 09:50
  • Not sure about the "preinstall" line but deleting the yarn.lock file and running "yarn" solved the problem for me. – barcel0 Apr 15 '22 at 20:01
  • 2
    for those that use `yarn` just need to add the "resolutions": {} to the package.json so, `npm-force-resolutions` isn't needed. – masmerino May 17 '22 at 01:17
  • The above didn't work for me and neither did the `package.json` resolution. – Levidps Jun 10 '22 at 03:00
  • 1
    Had to delete `node_modules` and `yarn.lock` then run `yarn` and it worked for NextJS 12 => 13 upgrade – jahooma Oct 28 '22 at 01:47
15

Nothing to "seriously" recommend, but I was able to workaround the error by omitting types:

function MyApp({ Component, pageProps }: AppProps) {
  const AnyComponent = Component as any;
  return <AnyComponent {...pageProps} />;
}
camposer
  • 5,152
  • 2
  • 17
  • 15
  • 8
    I get that Typescript people don't like `any` but seriously, this error messed with me real bad, I was completely stuck, searched for hours, tried the same kind of solution but with `as JSX.Element` and it didn't work. This is the only thing that worked for me so thank you @camposer – Mouradif May 29 '22 at 23:08