<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">I have an app that imports both <code class="notranslate">pixi.js</code> and <code class="notranslate">pixi-batch-renderer</code>. <code class="notranslate">pixi-batch-renderer</code> imports classes from <code class="notranslate">pixi.js</code> as well.</p>
<p dir="auto">The resulting bundle has two pixi.js instances - one from the ESM build (required from the app itself), and one from the CJS build (required from pixi-batch-renderer). (required means <code class="notranslate">require()</code> inside the bundle).</p>
<p dir="auto">This should not be the case - webpack should only bundle the ESM version.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">The full reproduction is here: <a href="https://github.com/SukantPal/webpack-duplicate-bundle">https://github.com/SukantPal/webpack-duplicate-bundle</a></p>
<p dir="auto">I've given more details there.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Only one version of pixi.js should be bundled.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4.42.0<br>
Node.js version: 12.7.0<br>
Operating System: macOS Catalina<br>
Additional tools: N/A</p>
<p dir="auto">I am building a web app (React) in which I need to support multiple themes. The file structure is as follows. Each component has it's own directory containing all files that belong to the component.<br>
Example:</p>
<p dir="auto">ui-Avatar<br>
|-- index.jsx<br>
|-- theme-a.css<br>
|-- theme-b.css<br>
|-- ....</p>
<p dir="auto">When using webpack-dev-server I can quite easily use a conditional require and pull in either theme-a or theme-b.</p>
<p dir="auto">onComponentWillMount() {<br>
if (this.context.theme === 'theme-a') {<br>
require('./theme-a.css');<br>
else (this.context.theme === 'theme-b') {<br>
require('./theme-b.css');<br>
}<br>
}</p>
<p dir="auto">BUT when I use web pack to package for the production server both theme-a.css and theme-b.css get pulled in and packaged into the same resulting css file. With the result that the style rules in the themes overwrite each other.</p>
<p dir="auto">What I would like is to be able to produce separate files for the two themes with the collected theme snippets from all the components in the application.</p>
<p dir="auto">Does anyone know how to set up webpack to solve my problem?</p>