“组件”不能用作JSX组件,Nextjs

col17t5w 于 2022-12-23 发布在其他

关注(0)|答案(3)|浏览(302)

下面是_app.tsx的外观：

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

我在构建项目时遇到此错误：

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("/Users/user/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

以下是react版本：

"react": "17.0.2",
"react-dom": "17.0.2",
"@types/react": "17.0.26",

我试图切换到18版本，它的工作，但，我得到了这个错误：第一个月

next.js

来源：https://stackoverflow.com/questions/71974065/component-cannot-be-used-as-a-jsx-component-nextjs

3条答案

按热度按时间

jqjz2hbq1#

将以下代码添加到package.json文件中

"resolutions": {
  "@types/react": "17.0.2",
  "@types/react-dom": "17.0.2"
}

然后重新安装软件包

yarn

如果使用npm

npm i

赞(0）回复(0）举报 2022-12-23

ckx4rj1h2#

我认为这是因为你没有在你的项目中设置正确的typescript。我认为，目前，当你安装next.js，你应该有选择typescript的选项。如果没有

npm install --save-dev typescript @types/react @types/node.

在tsconfig.json中，你应该在编译器选项中有"jsx": "preserve"。它允许我们在项目中使用.tsx文件。tsconfig.json的一个例子

我认为这可能是问题所在。为了表明我们返回的是jsx，我们必须用() Package 组件。但是在您的组件中，您有

return <Component {...pageProps} />

尽管我试着输入()，vscode还是忽略了它。所以试试arrow函数：

const App = ({ Component, pageProps }: AppProps) => (
  <Component {...pageProps} />
);

export default App;

赞(0）回复(0）举报 2022-12-23

xxls0lw83#

将devDependencies中的React类型更新为18（如果您已经使用17.x）：

"@types/react": "^18",
"@types/react-dom": "^18"

赞(0）回复(0）举报 2022-12-23

我来回答

“组件”不能用作JSX组件,Nextjs

3条答案

相关问题

热门标签

最新问答