<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
Bundling <code class="notranslate">node</code> library target with <code class="notranslate">commonjs2</code> output type produces incorrect exports statements when dynamic import chunks are generated with prefetch hints.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
Full repro case is available in this repo: <a href="https://github.com/dbanisimov/webpack-commonjs-exports-repro">https://github.com/dbanisimov/webpack-commonjs-exports-repro</a></p>
<ol dir="auto">
<li>Create a library with dynamic imports and prefetch hints:</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// dep.js
export default () =&gt; console.log(&quot;dep&quot;);

// src.js
export default async () =&gt; {
    import(/* webpackPrefetch: true */ './dep').then((res) =&gt; {
        res.default();
        console.log('lib');
    })
}"><pre class="notranslate"><span class="pl-c">// dep.js</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-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"dep"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// src.js</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">async</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-k">import</span><span class="pl-kos">(</span><span class="pl-c">/* webpackPrefetch: true */</span> <span class="pl-s">'./dep'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">default</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'lib'</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>
<ol start="2" dir="auto">
<li>Bundle for node commonjs2</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  target: &quot;node&quot;,
  output: {
    library: {
      type: &quot;commonjs2&quot;,
    },
  },
};"><pre class="notranslate"><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-c1">target</span>: <span class="pl-s">"node"</span><span class="pl-kos">,</span>
  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">library</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">type</span>: <span class="pl-s">"commonjs2"</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-kos">}</span><span class="pl-kos">;</span></pre></div>
<ol start="3" dir="auto">
<li>Import the bundled library and inspect the library exports</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const lib = require('./dist/lib');
console.log(lib);

// =&gt; actual `undefined`
// =&gt; expected Object [Module] { default: [Getter] }"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">lib</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./dist/lib'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">lib</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// =&gt; actual `undefined`</span>
<span class="pl-c">// =&gt; expected Object [Module] { default: [Getter] }</span></pre></div>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
The expected behavior is preserving the entrypoint exports, including the default one.</p>


<p dir="auto"><strong>Other</strong><br>
After digging around I've found that this extra webpack runtime code line is responsible for corrupting the exports</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// webpack bundle mode: 'development'
// `__webpack_exports__` becomes `undefined` after the `__webpack_require__.O` function call
var __webpack_exports__ = __webpack_require__(&quot;./lib/lib.js&quot;);
__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
module.exports = __webpack_exports__;"><pre class="notranslate"><span class="pl-c">// webpack bundle mode: 'development'</span>
<span class="pl-c">// `__webpack_exports__` becomes `undefined` after the `__webpack_require__.O` function call</span>
<span class="pl-k">var</span> <span class="pl-s1">__webpack_exports__</span> <span class="pl-c1">=</span> <span class="pl-en">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-s">"./lib/lib.js"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">__webpack_exports__</span> <span class="pl-c1">=</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">.</span><span class="pl-en">O</span><span class="pl-kos">(</span><span class="pl-s1">__webpack_exports__</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">__webpack_exports__</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This line comes from the <code class="notranslate">onChunksLoaded</code> runtime call introduced in <a href="https://github.com/webpack/webpack/commit/c7f93af138cc56fb825c256b7972bcaf1bb2e137">this change</a>. I can confirm that downgrading to <code class="notranslate">webpack@5.24</code> mitigates the issue.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.25+<br>
Node.js version: 14.16<br>
Operating System: Ubuntu 20.04<br>
Additional tools: -</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:    5.72.1<br>
Node.js version:  v16.14.2<br>
Operating System:  windows<br>
Additional tools:</p>
<p dir="auto">My configuration is going to look like this。</p>
<p dir="auto">const BrowserReloadErrorOverlayWepbackPlugin = require('browser-reload-error-overlay-wepback-plugin');</p>
<p dir="auto">let compiler = webpack({</p>
<p dir="auto">//  ... Omit the configuration<br>
plugins: [<br>
new BrowserReloadErrorOverlayWepbackPlugin(),<br>
]</p>
<p dir="auto">});</p>
<p dir="auto">BrowserReloadErrorOverlayWepbackPlugin  npm</p>
<p dir="auto"><a href="https://www.npmjs.com/package/browser-reload-error-overlay-wepback-plugin" rel="nofollow">https://www.npmjs.com/package/browser-reload-error-overlay-wepback-plugin</a></p>
<p dir="auto">Main error code<br>
I used it in the plugin compiler.watch</p>
<p dir="auto">apply(compiler) {<br>
compiler.watch({},(err, stats) =&gt; {</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="})"><pre class="notranslate"><code class="notranslate">})
</code></pre></div>
<p dir="auto">}</p>
<p dir="auto">And then there was this mistake:<br>
ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.<br>
at Compiler.watch (K:\webpack-cli\node_modules\webpack\lib\Compiler.js:411:19)<br>
at webpack (K:\webpack-cli\node_modules\webpack\lib\webpack.js:144:15)<br>
at f (K:\webpack-cli\node_modules\webpack\lib\index.js:63:16)<br>
at App.setCompiler (K:\webpack-cli@webpack-cli\compiler-server.js:96:26)<br>
at App.middleware (K:\webpack-cli@webpack-cli\compiler-server.js:445:29)<br>
at App.init (K:\webpack-cli@webpack-cli\compiler-server.js:67:14)<br>
at processTicksAndRejections (node:internal/process/task_queues:96:5)</p>