CODEWITHSUNDEEP
javascriptreactjsdom
DaveTheAl
DaveTheAl

Reputation: 2155

Type error: 'Component' cannot be used as a JSX component

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)

Upvotes: 11

Views: 11710

Answers (4)

Andr&#233; Heringer
Andr&#233; Heringer

Reputation: 141

I removed the @types/react dependency that was in version 17.0.3, and added it again current version 18.0.9, It worked successfully 🤗

yarn remove @types/react
yarn add @types/react -D

Upvotes: 14

Javier Rodriguez
Javier Rodriguez

Reputation: 1

I updated Next.js to 12.1.6 and it worked (I removed yarn.lock and installed again with yarn install). This is my package.json:

{
  "name": "javier-portfolio",
  "version": "0.4.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@ajna/pagination": "^1.4.17",
    "@chakra-ui/icons": "^2.0.1",
    "@chakra-ui/react": "^1.8.8",
    "@emotion/react": "11",
    "@emotion/styled": "11",
    "framer-motion": "6",
    "next": "12.1.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/node": "^17.0.19",
    "@types/react": "^17.0.30",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "eslint-config-prettier": "^8.3.0",
    "typescript": "^4.4.4"
  },
  "resolutions": {
    "@types/react": "^17.0.30"
  }
}

Upvotes: 0

Prajwal Pradhan
Prajwal Pradhan

Reputation: 351

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

Upvotes: 20

DaveTheAl
DaveTheAl

Reputation: 2155

Adding


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

did the trick. I'm using yarn

Upvotes: 5

Related Questions