<p dir="auto">When using the conventional <a href="https://webpack.js.org/guides/code-splitting/#dynamic-imports" rel="nofollow">webpack 2+ dynamic imports</a>, everything works great in dev but breaks in production (with builds).</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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<h2 dir="auto">Current Behavior</h2>
<p dir="auto">A bug: dynamic imports should work in production as well as they do in development.</p>


<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Pull down this <a href="https://github.com/morgs32/with-dynamic-imports">example nextjs</a> app to reproduce</li>
<li><code class="notranslate">yarn dev</code> to see it working in dev</li>
<li><code class="notranslate">yarn build</code> then <code class="notranslate">yarn start</code> to spin up the production build</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I am trying to code-split my app and some of my dynamic imports are NOT components. So using <code class="notranslate">next/dynamic</code> is not appropriate...</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.1.0 (latest)</td>
</tr>
<tr>
<td>node</td>
<td>9.7.1</td>
</tr>
<tr>
<td>OS</td>
<td>mac</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
</tbody>
</table>
<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>
<h3 dir="auto">my config (tidied)</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// next.config.js
import HtmlWebpackPlugin from 'html-webpack-plugin';
import FaviconsWebpackPlugin from 'favicons-webpack-plugin';

module.exports = {
  webpack: (config, { dev }) =&gt; {
    config.plugins.push(
      new FaviconsWebpackPlugin({
        logo: './static/assets/images/favicon.png',
        inject: true,
      }),
      new HtmlWebpackPlugin(),
    );

    return config;
  },
};"><pre class="notranslate"><span class="pl-c">// next.config.js</span>
<span class="pl-k">import</span> <span class="pl-v">HtmlWebpackPlugin</span> <span class="pl-k">from</span> <span class="pl-s">'html-webpack-plugin'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">FaviconsWebpackPlugin</span> <span class="pl-k">from</span> <span class="pl-s">'favicons-webpack-plugin'</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-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-kos">{</span> dev <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">plugins</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span>
      <span class="pl-k">new</span> <span class="pl-v">FaviconsWebpackPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
        <span class="pl-c1">logo</span>: <span class="pl-s">'./static/assets/images/favicon.png'</span><span class="pl-kos">,</span>
        <span class="pl-c1">inject</span>: <span class="pl-c1">true</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">new</span> <span class="pl-v">HtmlWebpackPlugin</span><span class="pl-kos">(</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-kos">}</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// pages/_document.js
import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';

export default class SmediaDocument extends Document {
  render() {
    return (
      &lt;html lang=&quot;en&quot;&gt;
        &lt;Head&gt;
          &lt;meta charSet=&quot;utf-8&quot; /&gt;
          &lt;meta content=&quot;IE=edge&quot; httpEquiv=&quot;X-UA-Compatible&quot; /&gt;
          &lt;meta content=&quot;width=device-width,initial-scale=1&quot; name=&quot;viewport&quot; /&gt;
          &lt;title&gt;Schoenwald.media&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;Thoughts on CSS, JS, and overall clean code.&quot; /&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    );
  }
}"><pre class="notranslate"><span class="pl-c">// pages/_document.js</span>
<span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Document</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Head</span><span class="pl-kos">,</span> <span class="pl-v">Main</span><span class="pl-kos">,</span> <span class="pl-v">NextScript</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'next/document'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">SmediaDocument</span> <span class="pl-k">extends</span> <span class="pl-v">Document</span> <span class="pl-kos">{</span>
  <span class="pl-en">render</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-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">html</span> <span class="pl-c1">lang</span><span class="pl-c1">=</span><span class="pl-s">"en"</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">charSet</span><span class="pl-c1">=</span><span class="pl-s">"utf-8"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-s">"IE=edge"</span> <span class="pl-c1">httpEquiv</span><span class="pl-c1">=</span><span class="pl-s">"X-UA-Compatible"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-s">"width=device-width,initial-scale=1"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"viewport"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">title</span><span class="pl-c1">&gt;</span>Schoenwald.media<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">title</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"description"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-s">"Thoughts on CSS, JS, and overall clean code."</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">Head</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">body</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Main</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">NextScript</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">body</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">html</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">I'd expect that the favicons-webpack-plugin generates the icons, and the html-webpack-plugin inject it in the <code class="notranslate">&lt;head/&gt;</code> of the page. Which it doesn't.</p>
<h2 dir="auto">Steps to Reproduce</h2>
<ol dir="auto">
<li>Checkout <a href="https://github.com/schoenwaldnils/blog">https://github.com/schoenwaldnils/blog</a></li>
<li>Set up <code class="notranslate">.env</code>file with</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="HOST=localhost
PORT=3000"><pre class="notranslate"><code class="notranslate">HOST=localhost
PORT=3000
</code></pre></div>
<ol start="3" dir="auto">
<li><code class="notranslate">docker-compose up</code></li>
</ol>
<h2 dir="auto">Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>~4.0.0-beta.4</td>
</tr>
<tr>
<td>html-webpack-plugin</td>
<td>~2.30.1</td>
</tr>
<tr>
<td>favicons-webpack-plugin</td>
<td>0.0.7</td>
</tr>
<tr>
<td>node</td>
<td>8.4.0</td>
</tr>
<tr>
<td>OS</td>
<td>mhart/alpine-node:8.4.0</td>
</tr>
</tbody>
</table>