János
János

Reputation: 35080

Why: Type 'React.ReactNode' is not assignable to type.. ReactNode

I have following code:

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


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

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

export default MyApp

And I get this:

No overload matches this call.
  Overload 1 of 2, '(props: ProviderProps<AnyAction> | Readonly<ProviderProps<AnyAction>>): Provider<AnyAction>', gave the following error.
    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'.
  Overload 2 of 2, '(props: ProviderProps<AnyAction>, context: any): Provider<AnyAction>', gave the following error.
    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'.ts(2769)

in this line:

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

I did a yarn cache clean

Upvotes: 2

Views: 4907

Answers (1)

Ilya Konstantinov
Ilya Konstantinov

Reputation: 89

Just for highlighting solution, as @János advised higher in question comments:

Just remove node_modules folder and yarn.lock or package-lock.json file. And after reinstall deps.

Upvotes: 3

Related Questions