[英]React / NextJS: 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.我有一个 NextJS React Application 17.0.2,它在呈现单个页面之前声明了一堆提供程序。
Inside of my ./src/pages/_app.tsx
, I have the following code-snippet:在我的
./src/pages/_app.tsx
中,我有以下代码片段:
<ExistingPortfolioProvider registry={registry}>
<CrankProvider>
<Component {...pageProps} />
</CrankProvider>
</ExistingPortfolioProvider>
this code snippet runs on my development environment (when running next dev
).此代码片段在我的开发环境中运行(运行
next dev
时)。 When I upload this to vercel, however, I get the following error.但是,当我将其上传到 Vercel 时,出现以下错误。
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:我已经仔细检查过每个提供者确实像这样返回
children
:
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 --- --- 更新 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?
这是因为某些 NextJS 的东西渲染必须在服务器端左右吗?
--- UPDATE 2 --- --- 更新 2 ---
It fails on my laptop too now.它现在在我的笔记本电脑上也失败了。 I deleted the nextjs cached, yarn.lock and now got to reproduce it locally.
我删除了缓存的 nextjs,yarn.lock,现在必须在本地重现它。
--- UPDATE 3 --- --- 更新 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)我遇到了这个漂亮的线程https://github.com/facebook/react/issues/24304但是添加
"preinstall": "npx npm-force-resolutions"
在 yarn 上对我不起作用(它寻找一个package-json.lock
出于某种原因)
I upgraded my "@types/react" version to 18.0.1 and it worked.我将我的“@types/react”版本升级到 18.0.1 并且它工作正常。 Did you try this?
你试过这个吗?
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 🤗我删除了版本 17.0.3 中的 @types/react 依赖项,并再次添加了当前版本 18.0.9,它成功运行🤗
yarn remove @types/react
yarn add @types/react -D
Adding添加
"resolutions": {
"@types/react": "^17.0.38"
},
did the trick.成功了。 I'm using yarn
我正在使用纱线
I updated Next.js to 12.1.6 and it worked (I removed yarn.lock and installed again with yarn install
).我将 Next.js 更新为 12.1.6 并且它工作正常(我删除了 yarn.lock 并使用
yarn install
再次安装)。 This is my package.json:这是我的 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"
}
}
As @javier-rodriguez stated, updating to Next 12.1.6 worked fine for me正如@javier-rodriguez所说,更新到 Next 12.1.6 对我来说效果很好
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.