“组件”不能用作 JSX 组件。其元素类型 'ReactElement<any, any> | Component<{},any,any>' 不是有效的 JSX 元素

Question

\n
• 我正在存储库上运行“yarn build”和/或“npm run build”。（两个命令的错误相同）
\n
• 我正在尝试构建此代码并将其部署到 AWS 环境，所以现在我只是试图克服告诉我“无法编译”的错误
\n
• 错误仅指向整个应用程序中的一个点。\n这一行：\ngetLayout(<Component {...pageProps} />)
\n

\n

这是完整的错误；

\n

类型错误：\'Component\' 无法用作 JSX 组件。\n其元素类型 \'ReactElement<any,any> | Component<{},any,any>\' 不是有效的 JSX 元素。

\n

                     <Loader />\n                   ) : (\n                     getLayout(<Component {...pageProps} />)\n                                ^\n                   )\n                 }\n               </AuthConsumer>\n

\n

错误 命令失败，退出代码为 1。

\n

我读过关于“组件不能用作 JSX 组件”的类似问题和帖子，但它们并没有帮助我继续前进。

\n

版本:\nreact,\xc2\xa0\n@types/react,\xc2\xa0\n@types/react-dom,\n全部设置为版本\xc2\xa017.0.2

\n

我已经删除了 package-lock.json 文件，现在只留下了 yarn-lock.json 文件

\n

我缺少什么线索来解决这个难题？

\n

亲切的问候

\n

//////////////我现在将在下面添加更多代码供其他人查看

\n

因此，对我来说，这个问题的解决方案是将这些代码行添加到compilerOptions 中的 tsconfig.json 文件中...

\n

"paths": { "react": [ "./node_modules/@types/react" ] }

\n

下面我将分享问题所在的完整代码。

\n

\r\n

\r\n

                     <Loader />\n                   ) : (\n                     getLayout(<Component {...pageProps} />)\n                                ^\n                   )\n                 }\n               </AuthConsumer>\n

\r\n

\r\n

\r\n

\n

Answer 1

问题出在最新版本的 @types/react:18.xx 这可能是通过其他一些包的对等依赖项引入到您的项目中的。

如果您有 .tsconfig 文件，请将以下内容添加到compilerOptions：

"paths": {
   "react": [ "./node_modules/@types/react" ]
 }