<p dir="auto">In a sample typescript react project,</p>
<ol dir="auto">
<li>
<p dir="auto">Add test-component-library dependency int package.json =&gt;<br>
"dependencies": {<br>
"test-component-library": "git+<a href="https://github.com/anmdsystems/test-component-library.git">https://github.com/anmdsystems/test-component-library.git</a>"</p>
</li>
<li>
<p dir="auto">Add App.tsx =&gt;  return &lt;Button label="Test"&gt; &lt;/Button&gt;</p>
</li>
</ol>
<p dir="auto">import React from 'react';<br>
import './App.css';<br>
import { Button } from 'test-component-library';</p>
<p dir="auto">function App() {<br>
return </p>
<p dir="auto">}</p>
<p dir="auto">export default App;</p>
<ol start="3" dir="auto">
<li>Run the sample app, console shows the error message</li>
</ol>
<p dir="auto">Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
<ol dir="auto">
<li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
<li>You might be breaking the Rules of Hooks</li>
<li>You might have more than one copy of React in the same app<br>
See <a href="https://reactjs.org/link/invalid-hook-call" rel="nofollow">https://reactjs.org/link/invalid-hook-call</a> for tips about how to debug and fix this problem.<br>
printWarning @ react.development.js:209<br>
error @ react.development.js:183<br>
resolveDispatcher @ react.development.js:1592<br>
useState @ react.development.js:1621<br>
Button @ Button.tsx:9<br>
renderWithHooks @ react-dom.development.js:16305<br>
mountIndeterminateComponent @ react-dom.development.js:20074<br>
beginWork @ react-dom.development.js:21587<br>
beginWork$1 @ react-dom.development.js:27426<br>
performUnitOfWork @ react-dom.development.js:26557<br>
workLoopSync @ react-dom.development.js:26466<br>
renderRootSync @ react-dom.development.js:26434<br>
performConcurrentWorkOnRoot @ react-dom.development.js:25738<br>
workLoop @ scheduler.development.js:266<br>
flushWork @ scheduler.development.js:239<br>
performWorkUntilDeadline @ scheduler.development.js:533<br>
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</li>
<li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
<li>You might be breaking the Rules of Hooks</li>
<li>You might have more than one copy of React in the same app<br>
See <a href="https://reactjs.org/link/invalid-hook-call" rel="nofollow">https://reactjs.org/link/invalid-hook-call</a> for tips about how to debug and fix this problem.<br>
printWarning @ react.development.js:209<br>
error @ react.development.js:183<br>
resolveDispatcher @ react.development.js:1592<br>
useState @ react.development.js:1621<br>
Button @ Button.tsx:9<br>
renderWithHooks @ react-dom.development.js:16305<br>
mountIndeterminateComponent @ react-dom.development.js:20074<br>
beginWork @ react-dom.development.js:21587<br>
callCallback @ react-dom.development.js:4164<br>
invokeGuardedCallbackDev @ react-dom.development.js:4213<br>
invokeGuardedCallback @ react-dom.development.js:4277<br>
beginWork$1 @ react-dom.development.js:27451<br>
performUnitOfWork @ react-dom.development.js:26557<br>
workLoopSync @ react-dom.development.js:26466<br>
renderRootSync @ react-dom.development.js:26434<br>
performConcurrentWorkOnRoot @ react-dom.development.js:25738<br>
workLoop @ scheduler.development.js:266<br>
flushWork @ scheduler.development.js:239<br>
performWorkUntilDeadline @ scheduler.development.js:533<br>
react.development.js:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState')<br>
at Object.useState (react.development.js:1622:1)<br>
at Button (Button.tsx:9:1)<br>
at renderWithHooks (react-dom.development.js:16305:1)<br>
at mountIndeterminateComponent (react-dom.development.js:20074:1)<br>
at beginWork (react-dom.development.js:21587:1)<br>
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)<br>
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)<br>
at invokeGuardedCallback (react-dom.development.js:4277:1)<br>
at beginWork$1 (react-dom.development.js:27451:1)<br>
at performUnitOfWork (react-dom.development.js:26557:1)</li>
</ol>
<h1 dir="auto">To people coming from search: please <a href="https://reactjs.org/warnings/invalid-hook-call-warning.html" rel="nofollow">read this page first</a>. It contains most common possible fixes!</h1>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Enhancement</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">I had multiple instances of React by mistake.</p>
<p dir="auto">When trying to use hooks, got this error:<br>
<code class="notranslate">hooks can only be called inside the body of a function component</code></p>
<p dir="auto">Which is not correct since I was using function components. Took me a while to find the real cause of the issue.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Show the correct error message. Maybe detect that the app has multiple instances of React and say that it may be the reason of bugs.</p>