nbstsh

React v17 から v18 に上げたところ以下のようなエラーに遭遇。解決方法メモっていく。
<blockquote>
'MyComponent' cannot be used as a JSX component
</blockquote>
<img src="https://storage.googleapis.com/zenn-user-upload/32a2fdc20441-20240305.png" loading="lazy" class="md-img">

<h2 id="%E8%A7%A3%E6%B1%BA">
<a class="header-anchor-link" href="#%E8%A7%A3%E6%B1%BA" aria-hidden="true"></a> 解決</h2>
tsconfig.json の path alias で無理やり local の node_modules 内の @types/react を参照してあげれば解決する。
<div class="code-block-container">
<div class="code-block-filename-container"> tsconfig.json</div>
<pre class="diff-highlight language-diff-json"><code class="diff-highlight language-diff-json"> //...
 "paths": {
 "@/*": ["src/*"],
+ "react": ["./node_modules/@types/react"] 
 }
 //...
</code></pre>
</div><iframe id="zenn-embedded__3b80f95244a69" src="https://embed.zenn.studio/card#zenn-embedded__3b80f95244a69" data-content="https%3A%2F%2Fstackoverflow.com%2Fquestions%2F71841181%2Fsome-components-cannot-be-used-as-a-jsx-component" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://stackoverflow.com/questions/71841181/some-components-cannot-be-used-as-a-jsx-component" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://stackoverflow.com/questions/71841181/some-components-cannot-be-used-as-a-jsx-component</a>