<h1 dir="auto">Bug report</h1>
<p dir="auto">The <code class="notranslate">now dev</code> task hangs forever when I use <code class="notranslate">fork-ts-checker-webpack-plugin</code></p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Just instantiating the plugin causes the build to hang when an error is raised from <code class="notranslate">hot-reloader</code>. Given the following config:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const ForkTsCheckerWebpackPlugin = require(&quot;fork-ts-checker-webpack-plugin&quot;);
const withTypescript = require(&quot;@zeit/next-typescript&quot;);

module.exports = withTypescript({
  webpack: (config, options) =&gt; {
    if (options.isServer) {
      const plugin = new ForkTsCheckerWebpackPlugin();
    }

    return config;
  },
  target: &quot;serverless&quot;
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">ForkTsCheckerWebpackPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"fork-ts-checker-webpack-plugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">withTypescript</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"@zeit/next-typescript"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">withTypescript</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-en">webpack</span>: <span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">,</span> <span class="pl-s1">options</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-c1">isServer</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">plugin</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">ForkTsCheckerWebpackPlugin</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">return</span> <span class="pl-s1">config</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">target</span>: <span class="pl-s">"serverless"</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">If I comment out the <code class="notranslate">plugin</code> assignment, the build completes. But otherwise, I get this in my output:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="⠴ Setting up Builder for package.json:     at HotReloader.getWebpackConfig (/home/sam/sawtooth-alley/nextjs/node_modules/next/dist/server/hot-reloader.js:163:37) code: 'MODULE_NOT_FOUND' }^C"><pre class="notranslate"><code class="notranslate">⠴ Setting up Builder for package.json:     at HotReloader.getWebpackConfig (/home/sam/sawtooth-alley/nextjs/node_modules/next/dist/server/hot-reloader.js:163:37) code: 'MODULE_NOT_FOUND' }^C
</code></pre></div>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository:</p>
<ol dir="auto">
<li><a href="https://github.com/sslotsky/sawtooth-alley">Clone the project</a></li>
<li>Install dependencies</li>
<li>Run <code class="notranslate">now dev</code></li>
<li>See error</li>
<li>Comment out plugin instantiation code</li>
<li>Run <code class="notranslate">now dev</code> again</li>
<li>No error, the build completes</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The build output should look like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="sam@sam-ThinkPad-T480s:~/sawtooth-alley/nextjs$ now dev
&gt; Now CLI 15.7.0 dev (beta) — https://zeit.co/feedback/dev
&gt; Setting up 1 Builder
&gt; Success! Builder setup complete
&gt; Ready! Available at http://localhost:3000"><pre class="notranslate"><code class="notranslate">sam@sam-ThinkPad-T480s:~/sawtooth-alley/nextjs$ now dev
&gt; Now CLI 15.7.0 dev (beta) — https://zeit.co/feedback/dev
&gt; Setting up 1 Builder
&gt; Success! Builder setup complete
&gt; Ready! Available at http://localhost:3000
</code></pre></div>
<h2 dir="auto">Screenshots</h2>
<p dir="auto">If applicable, add screenshots to help explain your problem.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/374078/60826842-6be5a080-a174-11e9-9835-5730245c78a6.png"><img src="https://user-images.githubusercontent.com/374078/60826842-6be5a080-a174-11e9-9835-5730245c78a6.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Ubuntu 18.04.2 LTS</li>
<li>Version of Next.js: 8.1.0</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">I was unsure where to leave this report. The error seems to occur in the <code class="notranslate">hot-reloader</code> code, but it only happens when executing code from someone else's plugin. And it's the TypeScript plugin's repo that suggests using fork-ts-checker in the first place. So we have one plugin reporting the error cryptically, one third-party plugin seemingly causing it, and an official plugin suggesting the use of the third-party one. Who owns this thing? If it's not you, I'm happy to duplicate the issue in other repos! 😂</p>
<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">I had a simple working styled-components header inside a Next@3 website:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="h1 {
    cursor: pointer;
    ${props =&gt; (props.primary &amp;&amp; 'font-size: 6rem;') || 'font-size: 2rem;'}
    line-height: 1.1;
    margin-bottom: 1rem;
    transform: skewY(-2deg);
  }"><pre class="notranslate"><code class="notranslate">h1 {
    cursor: pointer;
    ${props =&gt; (props.primary &amp;&amp; 'font-size: 6rem;') || 'font-size: 2rem;'}
    line-height: 1.1;
    margin-bottom: 1rem;
    transform: skewY(-2deg);
  }
</code></pre></div>
<p dir="auto">This is based on the documentation for styled-components at: <a href="https://www.styled-components.com/docs/basics#adapting-based-on-props" rel="nofollow">https://www.styled-components.com/docs/basics#adapting-based-on-props</a></p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Upgrading to next@4 resulted in the following error message:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Module build failed: SyntaxError: 
      Found an `undefined` or invalid value in your styles: `props.primary`.

      If you are trying to use dynamic styles in external files this is unfortunately not possible yet.
      Please put the dynamic parts alongside the component. E.g.

      &lt;button&gt;
        &lt;style jsx&gt;{externalStylesReference}&lt;/style&gt;
        &lt;style jsx&gt;{`
          button { background-color: ${props.primary} }
        `}&lt;/style&gt;
      &lt;/button&gt;"><pre class="notranslate"><code class="notranslate">Module build failed: SyntaxError: 
      Found an `undefined` or invalid value in your styles: `props.primary`.

      If you are trying to use dynamic styles in external files this is unfortunately not possible yet.
      Please put the dynamic parts alongside the component. E.g.

      &lt;button&gt;
        &lt;style jsx&gt;{externalStylesReference}&lt;/style&gt;
        &lt;style jsx&gt;{`
          button { background-color: ${props.primary} }
        `}&lt;/style&gt;
      &lt;/button&gt;
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Init a new Next@3 site with styled-components@latest, sample document, page and component: <a href="https://gist.github.com/jamiemchale/3d7d593f7911ad33b354a80f134b32fd">https://gist.github.com/jamiemchale/3d7d593f7911ad33b354a80f134b32fd</a></li>
<li>Run, see site.</li>
<li>Update to Next@4, run, see error.</li>
</ol>