blocks|key|1571227|text|我有一个解决方案，似乎在18.0.1类型的定义中有大量的改变。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1571228|和你一样，我无法通过回到早期的版本来解决这个问题，但是调查让我发现，这是因为“react路由器”和其他人一起引入了“18.0.1”版本。|1571229|为了解决这个问题，我在我的package.json中添加了以下内容|1571230|++"resolutions":+{
++++"@types/react":+"17.0.14",
++++"@types/react-dom":+"17.0.14"
++},|code-block|syntax|javascript|1571231|然后我清除了我的节点模块，我的包缓存，然后重新运行纱线来提取新的包。|1571232|决议部分是关于纱线的(我用的)。我认为如果你使用的是NPM，你可以使用“重写”而不是“决心”。|1571233|npm版本应>=+8+https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides|offset|length|1571234|并在npm之前删除package-lock.json。|1571235|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides^0|0|0|0|0|0|0|B|1W|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@$Q|19|R|1A|1|1B]]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

I have a solution, it seems that there are a ton of breaking changes in the 18.0.1 type definitions.
Like you, I could not solve it by rolling back to earlier versions, but investigation lead me to discover that this was because 'react-router' among others was bringing in the '18.0.1' version.
to get around this, I added the following to my package.json
<pre><code> &quot;resolutions&quot;: {
 &quot;@types/react&quot;: &quot;17.0.14&quot;,
 &quot;@types/react-dom&quot;: &quot;17.0.14&quot;
 },
</code></pre>
Then I cleared my node-modules, and my package cache and then re-ran yarn to pull fresh packages.
The resolutions section is for yarn (which I use). and I think you can use 'overrides' instead of 'resolutions' if you are using NPM.
npm version should &gt;= 8
<a href="https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides" rel="noreferrer">https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides</a>
and delete package-lock.json before npm i.

blocks|key|1582983|text|这可能在返回children时发生。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1582984|export+const+Component+=+({+children+})+=>+{
++++//...do+stuff
++++return+children
}|code-block|syntax|javascript|1582985|若要修复，请将其包装在一个片段中：|1582986|return+<>{children}</>|1582987|我相信这是因为children可能是一个元素数组，我们只能返回一个元素。此类错误通常的消息是：|1582988|JSX+expressions+must+have+one+parent+element.|1582989|entityMap^0|6|8|0|0|0|0|7|8|0|0|19|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

This can occur when returning <code>children</code>:
<pre class="lang-js prettyprint-override"><code>export const Component = ({ children }) =&gt; {
 //...do stuff
 return children
}
</code></pre>
To fix, wrap in a fragment:
<pre class="lang-js prettyprint-override"><code>return &lt;&gt;{children}&lt;/&gt;
</code></pre>
I believe this is because <code>children</code> may be an array of elements and we are only allowed to return a single element. The usual message for this kind of error is:
<code>JSX expressions must have one parent element.</code>

blocks|key|1571315|text|误差TS2786通常来自于@types/react中的不匹配。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1571316|当您的库依赖于特定版本的@types/react+(即v17.0.47)和其他库使用不同的主要版本的@types/react+(即v18.0.14)时，这可能会导致在使用React.ReactNode或JSX.Element时出现兼容性问题。类型JSX.Element通常由React函数组件返回。|1571317|您可以通过简化对@types/react的依赖来解决这个问题，这样它们就可以遵循相同的主要版本。您可以通过执行@types/react+(当有package-lock.json文件时)或yarn+why+@types/react+(当存在yarn.lock文件时)来查找项目中依赖于package-lock.json的所有库。|1571318|在您的具体案例中，似乎存在从@types/react-calendar到@types/react的依赖关系。您的问题似乎是使用不同版本的@types/react在项目中存在其他依赖项。也许您甚至直接依赖于@types/react，其中确切的版本号与@types/react-calendar所需的@types/react版本不同。|1571319|entityMap|0|LINK|mutability|MUTABLE|url|https://typescript.tv/errors/#TS2786^0|D|C|0|8|0|0|C|C|1E|C|2D|F|2T|B|3F|B|0|8|C|1J|C|1Z|H|2L|L|3B|9|3X|H|0|E|L|10|C|1W|C|2U|C|3G|L|44|C|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|20|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]]]

<a href="https://typescript.tv/errors/#TS2786" rel="noreferrer">Error TS2786</a> often comes from a mismatch in <code>@types/react</code>.
When you have libraries that are dependent on a specific version of <code>@types/react</code> (i.e. v17.0.47) and you have other libraries working with a different major version of <code>@types/react</code> (i.e. v18.0.14), then this can cause compatibility issues when using <code>React.ReactNode</code> or <code>JSX.Element</code>. The type <code>JSX.Element</code> is usually returned by a React Function Component.
You can solve the problem by streamlining your dependencies on <code>@types/react</code>, so that these follow the same major version. You can find all libraries depending on <code>@types/react</code> in your project by executing <code>npm explain @types/react</code> (when a <code>package-lock.json</code> file is present) or <code>yarn why @types/react</code> (when a <code>yarn.lock</code> file is present).
In your specific case there seems to be a dependency from <code>@types/react-calendar</code> to <code>@types/react</code>. Your problem seems to be that there are other dependencies in your project using a different version of <code>@types/react</code>. Maybe you even have a direct dependency on <code>@types/react</code> where the exact version number is different from the <code>@types/react</code> version required by <code>@types/react-calendar</code>.

blocks|key|1583076|text|问题在于，react-route+v18不支持react-virtualized，应该降级。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1583077|因此，简单的方法是将您的路线降级如下：|1583078|"@types/react":+"17.0.0",
"@types/react-dom":+"17.0.0"|code-block|syntax|javascript|1583079|然后，你的应用程序应该正常工作。|1583080|entityMap^0|5|B|N|H|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

The problem is because <code>react-route</code> v18 does not support <code>react-virtualized</code> and it should be downgraded.
So the simple way is to downgrade your route as below:
<pre><code>&quot;@types/react&quot;: &quot;17.0.0&quot;,
&quot;@types/react-dom&quot;: &quot;17.0.0&quot;
</code></pre>
Then, your app should work properly.

blocks|key|784830|text|此问题与@type/react版本TS2786中的不匹配有关。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|784831|用npm缺陷或成纱脱纱修复它|784832|entityMap|0|LINK|mutability|MUTABLE|url|https://typescript.tv/errors/#TS2786|1|https://docs.npmjs.com/cli/v8/commands/npm-dedupe|2|https://yarnpkg.com/cli/dedupe^0|H|6|0|0|1|5|1|7|4|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]]]

This issue comes with mismatch in @types/react versions <a href="https://typescript.tv/errors/#TS2786" rel="nofollow noreferrer">TS2786</a>
Fix it with <a href="https://docs.npmjs.com/cli/v8/commands/npm-dedupe" rel="nofollow noreferrer">npm dedupe</a> or <a href="https://yarnpkg.com/cli/dedupe" rel="nofollow noreferrer">yarn dedupe</a>

blocks|key|1583177|text|只需在package.json中添加re和re+dom的最新版本，然后在下面的命令中运行，以便重新安装react和re+dom。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1583178|在这里，当发布这个答案时，最新版本的是18。|1583179|步骤-|1583180|删除您的产品的package-lock.json文件|ordered-list-item|offset|length|style|BOLD|1583181|打开项目的package.json。|1583182|替换版本|1583183|“@type/dom”："%5E18"，“@type/dom+dom”："%5E18“|blockquote|1583184|4.运行命令|1583185|npm安装|1583186|好了。它解决了我的问题。|1583187|entityMap^0|0|0|0|7|H|0|5|C|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|14|8|@$I|15|J|16|K|L]]|9|@]|A|$]]|$1|M|3|N|5|H|7|17|8|@$I|18|J|19|K|L]]|9|@]|A|$]]|$1|O|3|P|5|H|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1B|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1C|8|@]|9|@]|A|$]]|$1|V|3|W|5|S|7|1D|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|10|$]]

Just add the latest version of react and react-dom in package.json and run below command to re-install react and react-dom
Here , while posting this answer, latest version of react and react-dom is 18.
Steps-
<ol>
<li>Remove package-lock.json file of your proect</li>
<li>Open package.json of your project.</li>
<li>replace react and react-dom version</li>
</ol>
<blockquote>
<pre><code>&quot;@types/react&quot;: &quot;^18&quot;,

&quot;@types/react-dom&quot;: &quot;^18&quot;
</code></pre>
</blockquote>
4.Run command
<blockquote>
npm install --save-dev @types/react @types/react-dom
</blockquote>
Done. It resolved my issue.

blocks|key|1583219|text|如果有一个yarn用户在徘徊；在最近进行了react/react原生版本升级之后，谁出现了这个问题；只需删除，现有的yarn.lock文件&+node_modules文件夹，然后再次运行yarn+install就是我的工作方式。:)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|1583220|entityMap^0|5|4|1M|9|1Z|C|2L|C|1G|2|0^^$0|@$1|2|3|4|5|6|7|I|8|@$9|J|A|K|B|C]|$9|L|A|M|B|C]|$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|D]]|E|@]|F|$]]|$1|G|3|-4|5|6|7|T|8|@]|E|@]|F|$]]]|H|$]]

If there's a <code>yarn</code> user wandering around; who had this issue after doing a react/react-native version upgrade recently; just delete the existing <code>yarn.lock</code> file &amp; the <code>node_modules</code> folder and run <code>yarn install</code> again is what worked for me. :)

blocks|key|1571525|text|上面的答案都没有解决我的问题，因为相同的打字错误TS2786。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1571526|我是如何让它工作的是更新tsconfig.json|1571527|从…|1571528|{
++"compilerOptions":+{
++++"preserveSymlinks":+true,
++++...|code-block|syntax|javascript|1571529|至|1571530|{
++"compilerOptions":+{
++++"preserveSymlinks":+false,
++++...|1571531|或者干脆把它拿掉|1571532|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

None of the answers above solved my case for the same typescript error TS2786 
how I get it work is update tsconfig.json
from
<pre><code>{
 &quot;compilerOptions&quot;: {
 &quot;preserveSymlinks&quot;: true,
 ...
</code></pre>
to
<pre><code>{
 &quot;compilerOptions&quot;: {
 &quot;preserveSymlinks&quot;: false,
 ...
</code></pre>
or just simply remove it

I have a React Typescript application that won't compile. Many components have a render method that is typed to return <code>React.ReactNode</code> or <code>React.ReactElement</code>. On compile, many errors similar to the following are reported:
<pre><code>TS2786: 'MessagesWidget' cannot be used as a JSX component.
 Its instance type 'MessagesWidget' is not a valid JSX element.
 The types returned by 'render()' are incompatible between these types.
 Type 'React.ReactNode' is not assignable to type 'import(&quot;/home/node/app/node_modules/@types/react-calendar/node_modules/@types/react/index&quot;).ReactNode'.
</code></pre>
Why is the compiler expecting <code>ReactNode</code> as defined by the types bundled with <code>react-calendar</code>? I do have <code>@types/react-dom</code> installed as a dev dependency.
Other information that might be relevant:
<ol>
<li>This project was compiling until a couple of days ago and there were no code changes when the compile started failing, so I suspect that a package update triggered this (even if that's not the root cause). The only dependencies that were updated in the time window when the compile started failing were <code>@types/react</code> and <code>@types/react-dom</code>. Rolling these packages back to an older version did not fix the issue, however.</li>
<li>Changing my components render methods to return <code>JSX.Element</code> removes the compiler error, but there are third party components in the application where this is not possible.</li>
</ol>

TS2786 'Component' cannot be used as a JSX component

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我有一个不编译的React类型记录应用程序。许多组件都有一个类型为返回React.ReactNode或React.ReactElement的呈现方法。在编译时，报告了许多与以下类似的错误：TS2786: 'MessagesWidget' cannot be used as a JSX component. Its in...

问TS2786‘组件’不能用作JSX组件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TS2786‘组件’不能用作JSX组件EN