React / NextJS：类型错误：“组件”不能用作 JSX 组件

Question

我有一个 NextJS React 应用程序 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出于某种原因，它看起来像是一个）

Answer 1

我将“@types/react”版本升级到 18.0.1 并且它有效。你尝试过这个吗？

Answer 2

我删除了版本 17.0.3 中的 @types/react 依赖项，并在当前版本 18.0.9 中再次添加了它，它成功运行

yarn remove @types/react
yarn add @types/react -D

Answer 3

添加

"resolutions": {
    "@types/react": "^17.0.38"
  },

成功了。我用的是纱线