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




<p dir="auto"><strong>What is the current behavior?</strong><br>
With 5.0.0-beta.14 the generated code for <a href="https://github.com/bvaughn/react-virtualized/blob/1a85f588420378aee32216e1c7f51d61155eb2b6/source/CellMeasurer/index.js">https://github.com/bvaughn/react-virtualized/blob/1a85f588420378aee32216e1c7f51d61155eb2b6/source/CellMeasurer/index.js</a><br>
is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/* harmony import */ var _CellMeasurer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CellMeasurer */ &quot;./node_modules/react-virtualized/dist/es/CellMeasurer/CellMeasurer.js&quot;);
/* harmony import */ var _CellMeasurerCache__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CellMeasurerCache */ &quot;./node_modules/react-virtualized/dist/es/CellMeasurer/CellMeasurerCache.js&quot;);


/* unused harmony default export */ var _unused_webpack_default_export = (CellMeasurer);"><pre class="notranslate"><code class="notranslate">/* harmony import */ var _CellMeasurer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CellMeasurer */ "./node_modules/react-virtualized/dist/es/CellMeasurer/CellMeasurer.js");
/* harmony import */ var _CellMeasurerCache__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CellMeasurerCache */ "./node_modules/react-virtualized/dist/es/CellMeasurer/CellMeasurerCache.js");


/* unused harmony default export */ var _unused_webpack_default_export = (CellMeasurer);
</code></pre></div>
<p dir="auto">This crashes with error <code class="notranslate">ReferenceError: CellMeasurer is not defined</code></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
I have not tried to create a minimal reproduction but we just import <code class="notranslate">react-virtualized</code> with:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {
  AutoSizer,
  Column,
  Table,
  TableCellProps,
  TableHeaderProps,
} from &quot;react-virtualized&quot;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span>
  <span class="pl-smi">AutoSizer</span><span class="pl-kos">,</span>
  <span class="pl-smi">Column</span><span class="pl-kos">,</span>
  <span class="pl-smi">Table</span><span class="pl-kos">,</span>
  <span class="pl-smi">TableCellProps</span><span class="pl-kos">,</span>
  <span class="pl-smi">TableHeaderProps</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"react-virtualized"</span></pre></div>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
That it would generate a bundle without reference errors :) It worked fine in 5.0.0-beta.13</p>
<p dir="auto">I assume the unused default export would either have to be removed completely or rewritten to export <code class="notranslate">_CellMeasurer__WEBPACK_IMPORTED_MODULE_0__</code></p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.0.0-beta.14<br>
Node.js version: 12.16.1<br>
Operating System: Ubuntu 20.04<br>
react-virtualized: 9.21.2</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Under some circumstances, the tree shaking process for an unused default export would only remove the variable definition while still preserves the variable reference in an expression like <code class="notranslate">var _unused_webpack_default_export = (style)</code>, causing a <code class="notranslate">ReferenceError</code> in browsers.</p>
<p dir="auto">Since webpack 5.0.0-beta.14 turned <code class="notranslate">optimization.usedExports</code> on by default, this bug became quite noticeable.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="git clone https://github.com/sodatea/webpack-used-exports-bug.git
cd webpack-used-exports-bug
yarn &amp;&amp; yarn start"><pre class="notranslate">git clone https://github.com/sodatea/webpack-used-exports-bug.git
<span class="pl-c1">cd</span> webpack-used-exports-bug
yarn <span class="pl-k">&amp;&amp;</span> yarn start</pre></div>
<p dir="auto">Then visit <a href="http://localhost:5000/example/index.html" rel="nofollow">http://localhost:5000/example/index.html</a> to see the error message.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<ul dir="auto">
<li>Edit the <code class="notranslate">webpack.config.js</code> to turn off <code class="notranslate">optimization.usedExports</code></li>
<li>rerun <code class="notranslate">yarn start</code></li>
<li>visit <a href="http://localhost:5000/example/index.html" rel="nofollow">http://localhost:5000/example/index.html</a> and the error disappears</li>
</ul>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version: v5.0.0-beta.14<br>
Node.js version: v12.16.1<br>
Operating System: macOS Catalina 10.15.3<br>
Additional tools: None</p>