<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Upgrading to Next 9.0 from 8.1 breaks any Jest tests for components that use dynamic imports syntax (not using <code class="notranslate">next/dynamic</code>) :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  ● OurComponent › test

    Not supported

      78 |   public componentDidMount(): void {
      79 |     if (this.ref.current) {
    &gt; 80 |       import('./some-other-file').then(
         |       ^"><pre class="notranslate"><code class="notranslate">  ● OurComponent › test

    Not supported

      78 |   public componentDidMount(): void {
      79 |     if (this.ref.current) {
    &gt; 80 |       import('./some-other-file').then(
         |       ^
</code></pre></div>
<p dir="auto">This appears to be due to <code class="notranslate">babel-plugin-dynamic-import-node</code> being removed from the <code class="notranslate">next/babel</code> preset to fix another issue in this <a href="https://spectrum.chat/next-js/general/next-8-minor-update-breaks-dynamic-import-in-jest-tests~1e7b58e7-e301-4ef9-9de4-eef6ed3639d4" rel="nofollow">Spectrum post</a>.</p>
<p dir="auto">In my use case, I'm not importing another component, so it seemed unnecessary to use <code class="notranslate">next/dynamic</code> here. However, looking at the documentation, I would have suspected that usage like the documentation suggests should also break Jest tests due to it using dynamic import syntax as well:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const DynamicComponent = dynamic(() =&gt; import('../components/hello'));"><pre class="notranslate"><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-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'../components/hello'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">To Reproduce</h2>
<ol dir="auto">
<li>Use <code class="notranslate">next/babel</code> preset in <code class="notranslate">.babelrc</code>.</li>
<li>Create a component that uses a dynamic import (e.g. in <code class="notranslate">componentDidMount</code>).</li>
<li>Create a test that renders the component.</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Tests should not fail.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Ubuntu 18.04</li>
<li>Version of Next.js: 9.0</li>
</ul>
<h1 dir="auto">Bug report</h1>
<p dir="auto">Since upgrading to v9 I've run into several issues that stop the deployment, the app runs fine with <code class="notranslate">now dev</code> . This includes</p>
<ul dir="auto">
<li>can't load grpc</li>
<li>self register bug
<ul dir="auto">
<li>both avoided when setting grpc to external in custom webpack config as mentioned</li>
</ul>
</li>
<li>can't use latest firebase - produces <code class="notranslate">pages/about.js:29:31) code: 'MODULE_NOT_FOUND' }</code> when that page clearly exists, (downgrading to 5.11.1 "solves" this)</li>
</ul>
<p dir="auto">Seems to relate to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="466802278" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/7894" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/7894/hovercard" href="https://github.com/vercel/next.js/issues/7894">#7894</a> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="464666824" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/7758" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/7758/hovercard" href="https://github.com/vercel/next.js/pull/7758">#7758</a> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="420919884" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/6655" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/6655/hovercard" href="https://github.com/vercel/next.js/issues/6655">#6655</a></p>
<p dir="auto">Working around the above I now get the following as mentioned here <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="466802278" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/7894" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/7894/hovercard?comment_id=513766944&amp;comment_type=issue_comment" href="https://github.com/vercel/next.js/issues/7894#issuecomment-513766944">#7894 (comment)</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="running &quot;yarn run now-build&quot;
Jul 22 2019 14:05:48:345 | ...next.config.js | yarn run v1.16.0
Jul 22 2019 14:05:48:403 | ...next.config.js | $ next build
Jul 22 2019 14:05:49:159 | ...next.config.js | Creating an optimized production build ...
Jul 22 2019 14:05:49:824 | ...next.config.js | &gt; Using external babel configuration
Jul 22 2019 14:05:49:824 | ...next.config.js | &gt; Location: &quot;/tmp/bc0fa1c/babel.config.js&quot;
Jul 22 2019 14:07:52:235 | ...next.config.js | Failed to compile.
Jul 22 2019 14:07:52:235 | ...next.config.js | ./node_modules/amp-toolbox-optimizer/lib/transformers/AddBlurryImagePlaceholders.js
Jul 22 2019 14:07:52:235 | ...next.config.js | Module not found: Can't resolve 'jimp' in '/tmp/bc0fa1c/node_modules/amp-toolbox-optimizer/lib/transformers'
Jul 22 2019 14:07:52:235 | ...next.config.js |  "><pre class="notranslate"><code class="notranslate">running "yarn run now-build"
Jul 22 2019 14:05:48:345 | ...next.config.js | yarn run v1.16.0
Jul 22 2019 14:05:48:403 | ...next.config.js | $ next build
Jul 22 2019 14:05:49:159 | ...next.config.js | Creating an optimized production build ...
Jul 22 2019 14:05:49:824 | ...next.config.js | &gt; Using external babel configuration
Jul 22 2019 14:05:49:824 | ...next.config.js | &gt; Location: "/tmp/bc0fa1c/babel.config.js"
Jul 22 2019 14:07:52:235 | ...next.config.js | Failed to compile.
Jul 22 2019 14:07:52:235 | ...next.config.js | ./node_modules/amp-toolbox-optimizer/lib/transformers/AddBlurryImagePlaceholders.js
Jul 22 2019 14:07:52:235 | ...next.config.js | Module not found: Can't resolve 'jimp' in '/tmp/bc0fa1c/node_modules/amp-toolbox-optimizer/lib/transformers'
Jul 22 2019 14:07:52:235 | ...next.config.js |  
</code></pre></div>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Attempt to deploy nextjs v9 with firebase</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Can deploy next js v9 to Now 2.0</p>