\'Component\' 不能用作 JSX 组件 [关闭]答案

【问题标题】：'Component' cannot be used as a JSX component [closed]\'Component\' 不能用作 JSX 组件 [关闭]
【发布时间】：2023-01-08 13:43:41
【问题描述】：

从昨天开始，我试图解决我在 nextjs-typescript 应用程序中部署 vercel 时遇到的这个问题。但无法解决。这个错误是突然发生的，而且不是我这边的。任何的想法？

./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.

【问题讨论】：

请提供minimal reproducible example。
在 package.json 文件中添加解决方案和覆盖解决了我的问题。 "resolutions": { "@types/react": "^17.0.1", "@types/react-dom": "^17.0.2" }, "overrides": { "@types/react": "^17.0.1", "@types/react-dom": "^17.0.2" }
也为我工作
@Scarass 我确实在一定程度上弄明白了。我的工作区中有一个模块指向 17.0.38。我把那个下移到 17.02。我也使用了覆盖。我使用了yarn cache clean。我擦除了我所有的 node_modules、.next、.turbo 目录。我什至可能不得不在某一时刻重新克隆该项目。最终我让它工作了。引擎盖下某处深处有一些困惑的龙......从未得到完美的答案。
谢谢@CodeManiak。我刚刚通过更新@types/react 和@types/react-dom 使我的工作正常。我不必使用决议和覆盖。

标签： typescript next.js

【解决方案1】：

也许你必须使用布局，如下所示：

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

export default function Layout({children}){

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

并将其导入到_app.jsx文件

_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>
    )
}

【讨论】：