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

Question

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

From error msg: Type '{}' is not assignable to type 'ReactNode'. Could it be the optional tag in type NextPageWithLayout: getLayout? that causes the error? — Enfield Li
– Enfield Li, Commented Apr 9, 2022 at 15:22
affirmative, it helped, butthen I got an other for Component keyword with the same 'Component' cannot be used as a JSX component. — János
– János, Commented Apr 9, 2022 at 15:53
I am not sure what you trying to do with my limited knowledge, since I have never used redux before. If you are trying to set up layout for child component, you can just create a optional wrapper and dont have to pass it through provider — Enfield Li
– Enfield Li, Commented Apr 9, 2022 at 16:04
I upgraded to Next.js 12.1.0 and cleaned all node_modules, and problem disappeared — János
– János, Commented Apr 9, 2022 at 17:36

Ilya Konstantinov · Accepted Answer · 2022-09-16 11:23:41Z

3

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.

answered Sep 16, 2022 at 11:23

Ilya Konstantinov

894 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related