React / NextJS: Type error: 'Component' cannot be used as a JSX component-CodePudding

I have a NextJS React Application 17.0.2 that declares a bunch of providers before rendering the individual page.

Inside of my ./src/pages/_app.tsx, I have the following code-snippet:

<ExistingPortfolioProvider registry={registry}>
    <CrankProvider>
        <Component {...pageProps} />
    </CrankProvider>
</ExistingPortfolioProvider>

this code snippet runs on my development environment (when running next dev). When I upload this to vercel, however, I get the following error.

Type error: 'Component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
      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("/vercel/path0/dapp-nextjs/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.
              Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props
  52 |                                             <ExistingPortfolioProvider registry={registry}>
  53 |                                                 <CrankProvider>
> 54 |                                                     <Component {...pageProps} />
     |                                                      ^
  55 |                                                 </CrankProvider>
  56 |                                             </ExistingPortfolioProvider>
  57 |                                         </UserWalletAssetsProvider>
error Command failed with exit code 1.

Any idea why this could be, or how I can debug this? I have already double-checked that each individual provider does return children like so:

    return (
        <>
            <ILocalKeypairContext.Provider value={value}>
                {props.children}
            </ILocalKeypairContext.Provider>
        </>
    );

The view it is trying to render also only has a single component that's returning a single node (with multiple children).

Any ideas what else I could be looking into?

--- UPDATE 1 ---

I edited the code to get a "minimum example",

   9 |     return (
  10 |         <>
> 11 |             <Component {...pageProps} />
     |              ^
  12 |         </>
  13 |     );

still getting the same issue. Is this because of some NextJS stuff where renders have to be server-side or so?

--- UPDATE 2 ---

It fails on my laptop too now. I deleted the nextjs cached, yarn.lock and now got to reproduce it locally.

--- UPDATE 3 ---

I came across this beautiful thread https://github.com/facebook/react/issues/24304 but the proposed solution of adding "preinstall": "npx npm-force-resolutions" does not work for me on yarn (it looks for a package-json.lock for some reason)

CodePudding user response：

Adding


"resolutions": {
    "@types/react": "^17.0.38"
  },

did the trick. I'm using yarn

CodePudding user response：

I upgraded my "@types/react" version to 18.0.1 and it worked. Did you try this?