<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">My application consists of two parts. The main web application and a module which gets dynamically loaded into the web application.<br>
Both web application and the module uses React 16.9.0.<br>
The module is loaded into the web application using React.lazy() and dynamic import() statement.<br>
When the module is loaded the application crashes with the following message in the console.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/5545438/64320589-39381700-d002-11e9-9026-33da5388496c.png"><img src="https://user-images.githubusercontent.com/5545438/64320589-39381700-d002-11e9-9026-33da5388496c.png" alt="Lazy loading demo" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong></p>
<p dir="auto">To reproduce the issue, we require an application and 2 modules each having their own build.<br>
Therefore a demo couldn't be created in codesandbox. I've attached a demo which can be used to reproduce the issue.<br>
<a href="https://github.com/facebook/react/files/3577981/lazy-loading.zip">lazy-loading.zip</a></p>
<ol dir="auto">
<li>Download the attached demo app.</li>
<li>Navigate to "\app\modules\module1" and "\app\modules\module1" folders and run "npm install" and "npm build" to build the modules.</li>
<li>Navigate to "\app" folder and run "npm install" and "npm start" to run the main app.</li>
<li>Open the dev tools and Browse to <a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a>.</li>
<li>Application will try to load the module which uses react hooks and crashes. The error message in the above screenshot will be displayed in the console.</li>
<li>In app.jsx comment the line &lt; LazyModule1 /&gt; and un-comment the line &lt; LazyModule2 /&gt;. Now the application will try to load the module which does not use react hooks.</li>
<li>The app will now load successfully.</li>
</ol>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">When both the app and the dynamically imported module is using the latest version of react the app should load without crashing.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">React - v16.9.0<br>
Browser - Chrome<br>
OS - Windows 10</p>
<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>