<p dir="auto">We have developed a custom server side rendering solution to allow for asynchronous data loading. Once everything is done we flush the final HTML to the browser along with all of the asynchronously loaded data written to the DOM. We are also generating a checksum the same way react does with server side rendering.</p>
<p dir="auto">During initial mount in the browser, all of the data needed by the app is available, but our data contract layer uses Promises to provide data to those who request it. Our components don't know whether or not the data is available, but our data layer does. So components use the following pseudocode for loading data:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="componentWillMount () {
    SomeModel.get({ params }).then(this.setState);
}"><pre class="notranslate"><code class="notranslate">componentWillMount () {
    SomeModel.get({ params }).then(this.setState);
}
</code></pre></div>
<p dir="auto">Underneath the hood, our model layer knows whether or not the data is available and uses the data, otherwise it makes an ajax request for the data. But being that react's render is synchronous and Promises are asynchronous, there is no way for us to take advantage of the reuse-existing-markup logic within react. We have tested that if we return a synchronous Promise shim/hack, then everything works as expected - but we all know the dangers in doing this. Is there any way we can defer the checksum checks somehow? Is there a way we can render the vdom only (in memory) and then trigger the mounting logic? We don't want a detached dom with real dom nodes, we are wanting react to construct its vdom and then mount when we tell it to. Thanks.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
A bug<br>
<strong>What is the current behavior?</strong><br>
It duplicates error message to the error stack. I run react code pre-processed by webpack/babel in node virtual machine for SSR purposes. Therefore, I need to re-map the error stack to proper files/lines/columns when the error happens. A duplicated error message in error stack is not corresponding to a common error stack format which causes incorrect re-mapping and mess in the error output.<br>
<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><br>
The following error message was found both in <code class="notranslate">e.message</code> and <code class="notranslate">e.stack</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem."><pre class="notranslate"><code class="notranslate">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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
</code></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
The error message should be found in <code class="notranslate">e.message</code> only.<br>
<strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
react@16.8.6<br>
webpack@4.36.1<br>
@babel/core@7.5.5<br>
@babel/runtime@7.5.5</p>