<p dir="auto">I'm using reactstrap (bootstrap) together with <a href="https://github.com/contra/react-responsive">react-responsive</a> for my site's responsive layout.<br>
There is no problem when I'm using reactstrap alone.</p>
<p dir="auto">However, when I mix react-responsive into the pages to show certain components only at certain screen breakpoints, I'm getting the following error in the browser console:</p>
<blockquote>
<p dir="auto"><code class="notranslate">main.js:4530 Warning: Expected server HTML to contain a matching &lt;div&gt; in &lt;div&gt;.</code></p>
</blockquote>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">The error should not be showing up in the browser console.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">An error <code class="notranslate">main.js:4530 Warning: Expected server HTML to contain a matching &lt;div&gt; in &lt;div&gt;.</code> will appear in the console when ever a page is refreshed.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Use  <a href="https://github.com/contra/react-responsive">react-responsive</a> to render a component when a smaller screen size is matched.</li>
<li>Refresh page</li>
<li>Error should will show up in console.</li>
<li>The page however appears to still work normally.</li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">I'm using reactstrap (bootstrap) together with <a href="https://github.com/contra/react-responsive">react-responsive</a> for my site's responsive layout.</p>
<p dir="auto">There is no problem when I'm using reactstrap alone.</p>
<p dir="auto">However, when I mix react-responsive into the pages to show certain components only at certain screen breakpoints, I'm getting the following error in the browser's console:</p>
<blockquote>
<p dir="auto"><code class="notranslate">main.js:4530 Warning: Expected server HTML to contain a matching &lt;div&gt; in &lt;div&gt;.</code></p>
</blockquote>
<p dir="auto">Removing the responsive component will get rid of this error message too.</p>
<p dir="auto">Although I'm not certainly sure what's the cause, I'm suspecting this has to do with the server side rendering. The mobile component was probably rendered dynamically on client but not on server side.</p>
<p dir="auto">Is there anything I can do to fix this error? Any impact if the error is left unresolved?</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>5.0.0</td>
</tr>
<tr>
<td>node</td>
<td>6.9.1</td>
</tr>
<tr>
<td>OS</td>
<td>Win 10</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto"><strong>Describe the bug</strong><br>
I am having a problem when using packages that have module caching and keep track of internal state in server rendering. An example of such packages is <a href="https://github.com/pauldijou/redux-act">redux-act</a> where module caching is used to keep track of an id used to serialize action types. The bug happens when importing my <code class="notranslate">store.js</code> file with all the actions, reducers and the store in <code class="notranslate">_app</code>, and importing it in other pages as well. This causes my <code class="notranslate">store.js</code> file to be bundled with both <code class="notranslate">_app</code> and any other page I am rendering like <code class="notranslate">index</code>. This causes the <code class="notranslate">createAction</code> to be called twice to the same action which causes the internal <code class="notranslate">redux-act</code> ids to be out of sync and thus the reducer never handles the add action</p>
<p dir="auto"><strong>To Reproduce</strong><br>
this reproduce code is passed on the <code class="notranslate">with-redux-wrapper</code> example.</p>
<ol dir="auto">
<li>clone <a href="https://github.com/Ilaiwi/next-_app-bug-example">https://github.com/Ilaiwi/next-_app-bug-example</a></li>
<li>run <code class="notranslate">npm run dev</code></li>
<li>go to localhost:3000</li>
</ol>
<p dir="auto"><strong>Expected behavior</strong><br>
the <code class="notranslate">AddCount</code> should be 1 because an <code class="notranslate">add</code> action was dispatched in <code class="notranslate">getInitialProps</code></p>
<p dir="auto"><strong>System information</strong></p>
<ul dir="auto">
<li>OS: [Windows 10 and osx]</li>
<li>Version of Next.js: [e.g. 6.0.3]</li>
</ul>
<p dir="auto"><strong>Additional context</strong><br>
what I did in the example is I just added <code class="notranslate">redux-act</code> and replaced the actions with <code class="notranslate">redux-act</code> actions and deleted the thunk <code class="notranslate">AddCount action</code>.</p>