【发布时间】：2023-01-31 05:00:44
【问题描述】：
我有一个 NextJS React Application 17.0.2，它在呈现单个页面之前声明了一堆提供程序。
在我的./src/pages/_app.tsx 中，我有以下代码-sn-p：
<ExistingPortfolioProvider registry={registry}>
<CrankProvider>
<Component {...pageProps} />
</CrankProvider>
</ExistingPortfolioProvider>
此代码 sn-p 在我的开发环境中运行（运行 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" 的建议解决方案对我来说在 yarn 上不起作用（出于某种原因它寻找 package-json.lock）
【问题讨论】：
-
CrankProvider组件之间似乎存在语法错误，其中键入了“^”符号。 -
@p4avinash 你怎么看这个？ xD
-
嗯，CrankProvider 似乎没有任何语法错误..
-
<Component {...pageProps} /> 您可以尝试暂时将组件的名称更改为 <ComponentTest {...pageProps} /> 之类的名称并检查。我能够解决类似问题的问题
-
@ChannaveerHakari 我将其更改为
<MyComponent {...pageProps} />（来自<Component {...pageProps} />）。我不会像这样导入道具function MyApp({Component: MyComponent, pageProps}: AppProps)（我不能直接重新定义 AppProps 中的类型）。我似乎消除了以前的错误，但现在我遇到了新的错误……看看我能在新错误上调试多少
标签： javascript reactjs web dom