<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Regression bug - as described here: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="41272580" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/433" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/433/hovercard?comment_id=286803302&amp;comment_type=issue_comment" href="https://github.com/webpack/webpack/issues/433#issuecomment-286803302">#433 (comment)</a></p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When adding HMR support to a project that has async chunks (was imported using <code class="notranslate">syntax-dynamic-import</code>) webpack does not keep the same name of the changed chunk. Therefore calls to <code class="notranslate">x-undefined.js</code> are being made.</p>
<p dir="auto">For some reason everything seems to be working only when also adding <code class="notranslate">NamedModulesPlugin</code> which is according to the docs optional. It seems it's actually mandatory.</p>
<p dir="auto"><strong>Important Note:</strong> I did NOT test it using the CLI option. Everything has been tested using the <code class="notranslate">WebpackDevServer</code> API.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">Just add an HMR support to a project by adding:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    filename: '[name]-[chunkhash].js',
    chunkFilename: '[name]-[chunkhash].js',"><pre class="notranslate">    <span class="pl-s1">filename</span>: <span class="pl-s">'[name]-[chunkhash].js'</span><span class="pl-kos">,</span>
    <span class="pl-s1">chunkFilename</span>: <span class="pl-s">'[name]-[chunkhash].js'</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="config.entry.application.unshift('react-hot-loader/patch');
config.entry.application.unshift('webpack/hot/dev-server');
config.entry.application.unshift(`webpack-dev-server/client?${config.output.publicPath}`);"><pre class="notranslate"><span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">entry</span><span class="pl-kos">.</span><span class="pl-c1">application</span><span class="pl-kos">.</span><span class="pl-en">unshift</span><span class="pl-kos">(</span><span class="pl-s">'react-hot-loader/patch'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">entry</span><span class="pl-kos">.</span><span class="pl-c1">application</span><span class="pl-kos">.</span><span class="pl-en">unshift</span><span class="pl-kos">(</span><span class="pl-s">'webpack/hot/dev-server'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">entry</span><span class="pl-kos">.</span><span class="pl-c1">application</span><span class="pl-kos">.</span><span class="pl-en">unshift</span><span class="pl-kos">(</span><span class="pl-s">`webpack-dev-server/client?<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">output</span><span class="pl-kos">.</span><span class="pl-c1">publicPath</span><span class="pl-kos">}</span></span>`</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="// HMR (Hot Module Replacement) plugins
config.plugins.push(new webpack.HotModuleReplacementPlugin());"><pre class="notranslate"><span class="pl-c">// HMR (Hot Module Replacement) plugins</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-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">HotModuleReplacementPlugin</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">Add <code class="notranslate">hot: true</code> to the <code class="notranslate">WebpackDevServer</code> configurations.</p>
<p dir="auto">The above fails.</p>
<p dir="auto">Now, try also adding:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="config.plugins.push(new webpack.NamedModulesPlugin());"><pre class="notranslate"><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-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">NamedModulesPlugin</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">Now everything is working again.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The expected behavior would be that HMR will work without the need to add <code class="notranslate">NamedModulesPlugin</code>.</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong></p>
<p dir="auto">Webpack version: 2.3.3<br>
Node.js version: 6.10.1<br>
OS: macOS</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Certain chunk requests use <code class="notranslate">undefined</code> instead of the hash. Example of the resulting error in chrome:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught (in promise) Error: Loading chunk 63 failed.
(error: https://{hostname}/app/63.undefined.feasContentHashV1.chunk.js)
    at HTMLScriptElement.i ({appName}.d5b0c78176fe6ff82a0f.bundle.js:1)"><pre class="notranslate"><code class="notranslate">Uncaught (in promise) Error: Loading chunk 63 failed.
(error: https://{hostname}/app/63.undefined.feasContentHashV1.chunk.js)
    at HTMLScriptElement.i ({appName}.d5b0c78176fe6ff82a0f.bundle.js:1)
</code></pre></div>
<p dir="auto">The request for chunk 63 looks like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="https://{hostname}/app/63.undefined.chunk.js"><pre class="notranslate"><code class="notranslate">https://{hostname}/app/63.undefined.chunk.js
</code></pre></div>
<p dir="auto">Stepping through the webpack build, it appears as though the function <code class="notranslate">getScriptSrcPath</code> in <code class="notranslate">JsonpMainTemplatePlugin.js</code> (<a href="https://github.com/webpack/webpack/blob/a0eab48f3799f5d3528b0c0c3a0e48161a43933c/lib/web/JsonpMainTemplatePlugin.js#L47">link</a>) creates a mapping of chunk Id to hash. Looking at the result, the entry for the chunk Id 63 is missing entirely, resulting in the <code class="notranslate">undefined</code> hash in the request.</p>
<p dir="auto">However, looking through the resulting build, there appears to be a valid chunk 63 with a valid hash in the file name. I'm guessing that somewhere along the line, the reference is lost to this chunk?</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">This is somewhat difficult to reproduce, I think its related to the total number of async chunks made by <code class="notranslate">splitChunksPlugin</code>, but I'm not 100% sure. I'm unable to reproduce a build that can do this. please let me now what other information would be useful.</p>
<p dir="auto">I think this may be related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="314966779" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/7061" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/7061/hovercard" href="https://github.com/webpack/webpack/issues/7061">#7061</a> since the behavior sounds similar. However, according to the maintainers that bug was fixed in 4.6.0. Since we are at a later version (4.29.0) I would expect that fix to be included.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I would expect <code class="notranslate">JsonpMainTemplatePlugin</code> to produce code that has a valid mapping of all chunk Id's to their respective hashes, and for all requests for chunks to have defined hashes.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4.29.0 (I also tried linking to a develop build of webpack)<br>
Node.js version: v8.11.1<br>
Operating System: MacOS<br>
Additional tools:</p>