<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">Next should refresh dynamic imported components using HMR.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">This bug depends on the place where the dynamic component is created. It works when the dynamic component is created on a page, but it doesn't work when it's created outside and imported using a regular <code class="notranslate">import x from</code>.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<p dir="auto">Create a component:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default () =&gt; &lt;p&gt; I am the component&lt;/p&gt;;"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span> I am the component<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">If you import that component and create the dynamic component on that page, HMR works:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(import('../components/Component.js'));

export default () =&gt; (
  &lt;div&gt;
    &lt;DynamicComponent /&gt;
  &lt;/div&gt;
);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">dynamic</span> <span class="pl-k">from</span> <span class="pl-s">'next/dynamic'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">DynamicComponent</span> <span class="pl-c1">=</span> <span class="pl-en">dynamic</span><span class="pl-kos">(</span><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'../components/Component.js'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-v">DynamicComponent</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">But if the dynamic import is on a different file, for example <code class="notranslate">DynamicComponent.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(import('./Component'));

export default DynamicComponent;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">dynamic</span> <span class="pl-k">from</span> <span class="pl-s">'next/dynamic'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">DynamicComponent</span> <span class="pl-c1">=</span> <span class="pl-en">dynamic</span><span class="pl-kos">(</span><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./Component'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">DynamicComponent</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">And you import it on a page with a regular import, HMR doesn't work:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import DynamicComponent from '../components/DynamicComponent.js';

export default () =&gt; (
  &lt;div&gt;
    &lt;DynamicComponent /&gt;
  &lt;/div&gt;
);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">DynamicComponent</span> <span class="pl-k">from</span> <span class="pl-s">'../components/DynamicComponent.js'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">DynamicComponent</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The rest of the dynamic import functionalities seem to work fine even on both cases, like SSR.</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>3.0.1-beta.18</td>
</tr>
<tr>
<td>node</td>
<td>6.10</td>
</tr>
<tr>
<td>OS</td>
<td>Sierra</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Build failed when importing firestore into Next app with error below (Error message attached below) :<br>
<code class="notranslate">Module not found: Can't resolve 'memcpy' in /node_modules/bytebuffer/dist</code></p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Reproduce repo : <a href="https://github.com/charlesyeo92/test-next-firestore">https://github.com/charlesyeo92/test-next-firestore</a></p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Build should success.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8202917/61181223-deafb980-a655-11e9-9cbf-13c7f8742f81.png"><img src="https://user-images.githubusercontent.com/8202917/61181223-deafb980-a655-11e9-9cbf-13c7f8742f81.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>Version of Next.js: 9.0.1</li>
<li>Version of @firebase/firestore: 1.4.4</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">However I was able to build successfully when removing <code class="notranslate">target: 'serverless'</code> from next.config.js.</p>