<p dir="auto">If using a component that has a hook from a submodule, react thinks the component is being called as a function</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="react.development.js:207 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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem."><pre class="notranslate"><code class="notranslate">react.development.js:207 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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
</code></pre></div>
<p dir="auto">React version:<br>
18.1.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ul dir="auto">
<li>Pull this branch <a href="https://github.com/ljmerza/react-error">https://github.com/ljmerza/react-error</a> then pull the submodules <code class="notranslate">git submodule update --init --recursive</code>.</li>
<li>run <code class="notranslate">npm ci</code> inside the src/submod folder (the submodule)</li>
<li>run <code class="notranslate">npm ci</code> in the root folder.</li>
<li>Run <code class="notranslate">npm start</code> and try to go to the home page</li>
</ul>
<p dir="auto">if i skip step 2 then it works but if using typescript, the submodule may have typings that the parent repo doesnt have so you need to run <code class="notranslate">npm ci</code> inside the submodule in this instance.</p>

<p dir="auto">Link to code example:<br>
<a href="https://github.com/ljmerza/react-error">https://github.com/ljmerza/react-error</a></p>

<h2 dir="auto">The current behavior</h2>
<h2 dir="auto">The expected behavior</h2>
<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>