'Component' cannot be used as a JSX component

user_17738584 0
Viewed 8757

Since yesterday I am trying to solve this problem which I got during deployment in vercel in my nextjs-typescript app. but could not solve it. this error suddenly happened and it's not from my side. any idea? enter image description here

./pages/_app.tsx:76:14
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/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.
  74 |               headersData={headerData}
  75 |             />
> 76 |             <Component {...pageProps} />
     |              ^
  77 |             <Footer />
  78 |           </main>
  79 |         </Provider>
error Command failed with exit code 1.
typescript next.js
1 Answers

Maybe you have to use the Layout, like below:

import React from "react";
import Footer from "./Footer";
import Nav from "./Nav";

export default function Layout({children}){

    return(
        <>
        <Nav />
        <main>
            {children}
        </main>
        <Footer />
        </>
    )
}

and import it to the _app.jsx file

_app.jsx :

import React from "react";
import Layout from "../components/Layout";
import '../css/global.css'
import Head from "next/head";


export default function ({ Component, pageProps }) {
    return (
        <Layout>
            <Head>
                <title>title</title>
            </Head>
            <Component {...pageProps} />
        </Layout>
    )
}
user_186881840
Related