我有一个NextJS React Application 17.0.2，它在呈现单个页面之前声明了一组提供者。
在我的./src/pages/_app.tsx中，我有以下代码片段：
<ExistingPortfolioProvider registry={registry}>
<CrankProvider>
<Component {...pageProps} />
</CrankProvider>
</ExistingPortfolioProvider>
这个代码片段在我的开发环境中运行(当运行next dev时(。然而，当我将其上传到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.
你知道为什么会这样，或者我如何调试它吗？我已经仔细检查了每个供应商是否返回children，如下所示：
return (
<>
<ILocalKeypairContext.Provider value={value}>
{props.children}
</ILocalKeypairContext.Provider>
</>
);
它试图渲染的视图也只有一个返回单个节点(带有多个子节点(的组件。
你知道我还能研究什么吗？
---更新1-
我编辑了代码；最小示例"；，
9 | return (
10 | <>
> 11 | <Component {...pageProps} />
| ^
12 | </>
13 | );
仍然有同样的问题。这是因为一些NextJS的东西，渲染必须是服务器端的吗？
---更新2-
现在我的笔记本电脑也出现故障。我删除了缓存的nextjs，yarn.lock，现在可以在本地复制它了。
---更新3-
我偶然发现了这条美丽的线https://github.com/facebook/react/issues/24304但所提出的添加"preinstall": "npx npm-force-resolutions"的解决方案对我的纱线不起作用(出于某种原因，它正在寻找package-json.lock(
我升级了我的"类型/反应"；版本更新为18.0.1，并且运行良好。你试过这个吗？
我删除了17.0.3版本中的@types/react依赖项，并在当前版本18.0.9中再次添加它，它成功地工作了🤗
yarn remove @types/react
yarn add @types/react -D
添加
"resolutions": {
"@types/react": "^17.0.38"
},
成功了。我用的是纱线
我将Next.js更新到12.1.6，它起作用了(我删除了yarn.lock，并使用yarn install重新安装(。这是我的包.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"
}
}
正如@javier rodriguez所说，更新到Next 12.1.6对我来说很好