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




<p dir="auto"><strong>What is the current behavior?</strong><br>
I have an issue after upgrade to webpack 5, we have internal components as npm packages and services that use those components and we have the following issue:</p>
<ol dir="auto">
<li>Package A have the following folder structure:<br>
src
<ul dir="auto">
<li>theme
<ul dir="auto">
<li>default-theme.ts</li>
</ul>
</li>
<li>views
<ul dir="auto">
<li>Component.tsx</li>
</ul>
</li>
<li>index.ts</li>
</ul>
</li>
<li>Service has the following folder structure<br>
src
<ul dir="auto">
<li>theme
<ul dir="auto">
<li>default-theme.ts</li>
</ul>
</li>
<li>exported
<ul dir="auto">
<li>ExportedView.tsx</li>
</ul>
</li>
<li>index.ts</li>
</ul>
</li>
</ol>
<p dir="auto">After we run build in the service, default-theme of  Package A gets replaced by default-theme of the service.</p>
<p dir="auto">This does not happen if the 2 files have different paths or different name.</p>
<p dir="auto">This happens with all files that have same name and same path.</p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">default-theme from the services should not override the package default-theme.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.60.0<br>
Node.js version: 14<br>
Operating System: Mac<br>
Additional tools:</p>
<p dir="auto">Current webpack configuration:</p>
<p dir="auto">const webpack = require('webpack');<br>
const { merge } = require('webpack-merge');<br>
const externalsConfig = require('./webpack.externals');<br>
const paths = require('../paths');<br>
const serviceName = require(paths.appPackageJson).name.<br>
const fs = require('fs');<br>
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');</p>
<p dir="auto">const DuplicatePackageCheckerPlugin = require(paths.scriptModule(<br>
'duplicate-package-checker-webpack-plugin'<br>
));</p>
<p dir="auto">let packages = fs.existsSync(paths.localDependencies)<br>
? require(paths.localDependencies).packages<br>
: {};</p>
<p dir="auto">const svgInlineOptions = {<br>
template: (<br>
{ template },<br>
opts,<br>
{ imports, componentName, props, jsx, exports }<br>
) =&gt; template.ast`<br>
${imports}</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  const ${componentName} = (${props}) =&gt; {
    return ${jsx};
  };

  export default ${componentName};
`,"><pre class="notranslate"><code class="notranslate">  const ${componentName} = (${props}) =&gt; {
    return ${jsx};
  };

  export default ${componentName};
`,
</code></pre></div>
<p dir="auto">};</p>
<p dir="auto">module.exports = () =&gt; {<br>
const entryPoints = {<br>
bundle: paths.appIndex<br>
};<br>
const commonConfigs = {<br>
entry: entryPoints,<br>
output: {<br>
filename: '[name].js',<br>
path: paths.appBuild,<br>
libraryTarget: 'umd',<br>
chunkFilename: '[name].[contenthash].bundle.js',<br>
devtoolNamespace: serviceName,<br>
library: serviceName<br>
},<br>
context: paths.appPath,</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    resolve: {
        
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.webpack.js', '.web.js'],
        alias: packages || {},
        fallback: {
            child_process: false,
            fs: false,
            crypto: false,
            net: false,
            tls: false,
            tty: require.resolve(&quot;tty-browserify&quot;),
            &quot;http&quot;: require.resolve(&quot;stream-http&quot;),
            &quot;https&quot;: require.resolve(&quot;https-browserify&quot;),
             path: require.resolve('path-browserify')
        }
    },

    stats: {
        // Examine all modules
        modulesSpace: Infinity,
        // Display bailout reasons
        optimizationBailout: true
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: paths.scriptModule('esbuild-loader'),
                        options: {
                            loader: 'tsx',
                            target: 'es2015',
                        }
                    }
                ], 
            },
            {
                test: /\.eot(\?.*)?$/,
                use: [{
                    loader: paths.scriptModule('file-loader?name=fonts/[content-hash].[ext]')
                }]
            },
            {
                test: /\.css?$/,
                use: [{loader:paths.scriptModule('style-loader/useable')},{loader: paths.scriptModule('raw-loader')}
                ]
            },
            {
                test: /\.svg(\?.*)?$/,
                use: [{
                loader: paths.scriptModule(
                    'url-loader?limit=10000&amp;mimetype=image/svg+xml&amp;name=fonts/[content-hash].[ext]'
                ) }],
                exclude: /\.inline.svg$/
            },
            {
                test: /\.inline.svg$/,
                use: [
                  {
                    loader: paths.scriptModule('@svgr/webpack'),
                    options: svgInlineOptions
                  },
                ],
              },
              {
                test: /\.(jpe?g|png|gif)$/i,
                use: [{
                loader: paths.scriptModule('url-loader?limit=1000&amp;name=images/[content-hash].[ext]')
            }]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: paths.scriptModule('style-loader/useable'),
                },{
                    loader: paths.scriptModule('css-loader'),
                },{
                    loader: paths.scriptModule('sass-loader')
                }   
                ]
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: paths.scriptModule('url-loader')
            },
            {
                test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: paths.scriptModule('file-loader')
            },
            {
                test: /font-awesome\.config\.js/,
                loader: paths.scriptModule('style-loader')
            }
        ]
    },
    plugins: [
        new ForkTsCheckerWebpackPlugin(),
        new webpack.LoaderOptionsPlugin({
            options: {
                tslint: {
                    failOnHint: true
                }
            }
        }),
        new DuplicatePackageCheckerPlugin({
            verbose: true,
            emitError: false,
            showHelp: true,
            strict: true
        }),
        new webpack.ProvidePlugin({
            process: 'process/browser'
        }),
    ],
    node: {}
};


return merge(externalsConfig, commonConfigs);"><pre class="notranslate"><code class="notranslate">    resolve: {
        
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.webpack.js', '.web.js'],
        alias: packages || {},
        fallback: {
            child_process: false,
            fs: false,
            crypto: false,
            net: false,
            tls: false,
            tty: require.resolve("tty-browserify"),
            "http": require.resolve("stream-http"),
            "https": require.resolve("https-browserify"),
             path: require.resolve('path-browserify')
        }
    },

    stats: {
        // Examine all modules
        modulesSpace: Infinity,
        // Display bailout reasons
        optimizationBailout: true
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: paths.scriptModule('esbuild-loader'),
                        options: {
                            loader: 'tsx',
                            target: 'es2015',
                        }
                    }
                ], 
            },
            {
                test: /\.eot(\?.*)?$/,
                use: [{
                    loader: paths.scriptModule('file-loader?name=fonts/[content-hash].[ext]')
                }]
            },
            {
                test: /\.css?$/,
                use: [{loader:paths.scriptModule('style-loader/useable')},{loader: paths.scriptModule('raw-loader')}
                ]
            },
            {
                test: /\.svg(\?.*)?$/,
                use: [{
                loader: paths.scriptModule(
                    'url-loader?limit=10000&amp;mimetype=image/svg+xml&amp;name=fonts/[content-hash].[ext]'
                ) }],
                exclude: /\.inline.svg$/
            },
            {
                test: /\.inline.svg$/,
                use: [
                  {
                    loader: paths.scriptModule('@svgr/webpack'),
                    options: svgInlineOptions
                  },
                ],
              },
              {
                test: /\.(jpe?g|png|gif)$/i,
                use: [{
                loader: paths.scriptModule('url-loader?limit=1000&amp;name=images/[content-hash].[ext]')
            }]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: paths.scriptModule('style-loader/useable'),
                },{
                    loader: paths.scriptModule('css-loader'),
                },{
                    loader: paths.scriptModule('sass-loader')
                }   
                ]
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: paths.scriptModule('url-loader')
            },
            {
                test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: paths.scriptModule('file-loader')
            },
            {
                test: /font-awesome\.config\.js/,
                loader: paths.scriptModule('style-loader')
            }
        ]
    },
    plugins: [
        new ForkTsCheckerWebpackPlugin(),
        new webpack.LoaderOptionsPlugin({
            options: {
                tslint: {
                    failOnHint: true
                }
            }
        }),
        new DuplicatePackageCheckerPlugin({
            verbose: true,
            emitError: false,
            showHelp: true,
            strict: true
        }),
        new webpack.ProvidePlugin({
            process: 'process/browser'
        }),
    ],
    node: {}
};


return merge(externalsConfig, commonConfigs);
</code></pre></div>
<p dir="auto">};</p>
<p dir="auto">While porting a pre-existing application over to webpack I ran into an issue while cleaning up dependencies. The current setup is that 3rd party (vendor) libraries would go in a 'vendor' chunk and application global ones in 'global'. There are various entry points in the application (not single-page) and thus the grouping helps with de-duplication.</p>
<p dir="auto">To make this work I created a vendor and global entry, hoping to rely on CommonsChunkPlugin to resolve duplicates. This appears to work, but only partially. A test case of my setup is listed below, but the result is that global-1.js, which main.js requires, makes it both in the generated global.js as well as main.js, rather than just in the global.js. If in the config I move the entry of global-1.js to the vendor chunk, it does properly exclude the chunk from the generated main.js.</p>
<p dir="auto">Files for repro case:</p>
<p dir="auto">webpack.config.js:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="'use strict';

var path = require(&quot;path&quot;);
var webpack = require(&quot;webpack&quot;);

module.exports = {
  entry: {
    vendor: [
      &quot;./modules/vendor-1&quot;,
      &quot;./modules/vendor-2&quot;,
    ],
    global: [
      &quot;./modules/global-1.js&quot;,
      &quot;./modules/global-2.js&quot;,
    ],

    main: &quot;./main.js&quot;,
  },
  plugins: [
    // XXX: there appears to be a bug in webpack here, even though a chunk
    // is common to global and main, it makes it into both.  The plugin
    // only appears to work properly for the first instantiation (vendor).
    new webpack.optimize.CommonsChunkPlugin(&quot;vendor&quot;, &quot;vendor.js&quot;, Infinity),
    new webpack.optimize.CommonsChunkPlugin(&quot;global&quot;, &quot;global.js&quot;, Infinity),
  ],
  output: {
    path: path.join(__dirname, &quot;js&quot;),
    filename: &quot;[name].js&quot;,
  }
};"><pre class="notranslate"><span class="pl-s">'use strict'</span><span class="pl-kos">;</span>

<span class="pl-k">var</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"path"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">webpack</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"webpack"</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-kos">{</span>
  <span class="pl-c1">entry</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">vendor</span>: <span class="pl-kos">[</span>
      <span class="pl-s">"./modules/vendor-1"</span><span class="pl-kos">,</span>
      <span class="pl-s">"./modules/vendor-2"</span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">global</span>: <span class="pl-kos">[</span>
      <span class="pl-s">"./modules/global-1.js"</span><span class="pl-kos">,</span>
      <span class="pl-s">"./modules/global-2.js"</span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>

    <span class="pl-c1">main</span>: <span class="pl-s">"./main.js"</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-c">// XXX: there appears to be a bug in webpack here, even though a chunk</span>
    <span class="pl-c">// is common to global and main, it makes it into both.  The plugin</span>
    <span class="pl-c">// only appears to work properly for the first instantiation (vendor).</span>
    <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-s">"vendor"</span><span class="pl-kos">,</span> <span class="pl-s">"vendor.js"</span><span class="pl-kos">,</span> <span class="pl-v">Infinity</span><span class="pl-kos">)</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">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-s">"global"</span><span class="pl-kos">,</span> <span class="pl-s">"global.js"</span><span class="pl-kos">,</span> <span class="pl-v">Infinity</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">path</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">"js"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">filename</span>: <span class="pl-s">"[name].js"</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">main.js:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="require(&quot;./modules/vendor-1&quot;)
require(&quot;./modules/vendor-2&quot;)
require(&quot;./modules/global-1.js&quot;)"><pre class="notranslate"><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"./modules/vendor-1"</span><span class="pl-kos">)</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"./modules/vendor-2"</span><span class="pl-kos">)</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"./modules/global-1.js"</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">modules/vendor-1.js:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// vendor-1"><pre class="notranslate"><span class="pl-c">// vendor-1</span></pre></div>
<p dir="auto">modules/vendor-2.js:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// vendor-1"><pre class="notranslate"><span class="pl-c">// vendor-1</span></pre></div>
<p dir="auto">modules/global-1.js:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// global-1"><pre class="notranslate"><span class="pl-c">// global-1</span></pre></div>
<p dir="auto">modules/global-2.js:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// global-2"><pre class="notranslate"><span class="pl-c">// global-2</span></pre></div>
<p dir="auto">global.js output:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="webpackJsonp([2],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(3);
    module.exports = __webpack_require__(4);


/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {

    // global-1

/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {

    // global-2

/***/ }
]);"><pre class="notranslate"><span class="pl-en">webpackJsonp</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-c1">2</span><span class="pl-kos">]</span><span class="pl-kos">,</span><span class="pl-kos">[</span>
<span class="pl-c">/* 0 */</span>
<span class="pl-c">/***/</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-s1">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-c1">3</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-c1">4</span><span class="pl-kos">)</span><span class="pl-kos">;</span>


<span class="pl-c">/***/</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-c">/* 1 */</span><span class="pl-kos">,</span>
<span class="pl-c">/* 2 */</span><span class="pl-kos">,</span>
<span class="pl-c">/* 3 */</span>
<span class="pl-c">/***/</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-c">// global-1</span>

<span class="pl-c">/***/</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-c">/* 4 */</span>
<span class="pl-c">/***/</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-c">// global-2</span>

<span class="pl-c">/***/</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">generated main.js output, note the global-1 section that also appears in the generated global.js:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="webpackJsonp([0],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1)
    __webpack_require__(2)
    __webpack_require__(3)


/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {

    // global-1

/***/ }
]);"><pre class="notranslate"><span class="pl-en">webpackJsonp</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">,</span><span class="pl-kos">[</span>
<span class="pl-c">/* 0 */</span>
<span class="pl-c">/***/</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-s1">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span>
    <span class="pl-s1">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-c1">2</span><span class="pl-kos">)</span>
    <span class="pl-s1">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-c1">3</span><span class="pl-kos">)</span>


<span class="pl-c">/***/</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-c">/* 1 */</span><span class="pl-kos">,</span>
<span class="pl-c">/* 2 */</span><span class="pl-kos">,</span>
<span class="pl-c">/* 3 */</span>
<span class="pl-c">/***/</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-c">// global-1</span>

<span class="pl-c">/***/</span> <span class="pl-kos">}</span>
<span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>