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




<p dir="auto"><strong>What is the current behavior?</strong><br>
There are some json files in our project which contain some big alphanumeric strings. The current hash regex isn't accurate enough to filter out these strings which cause the crash "Circular hash dependency"</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
We're applying a patch to the regex as a workaround now.</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">The same <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1638817358" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/16858" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/16858/hovercard" href="https://github.com/webpack/webpack/issues/16858">#16858</a></p>
<hr>


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




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">A <code class="notranslate">Circular hash dependency</code> compilation error is thrown for hash collisions in folder names.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">Applying this patch to my webpack config (from create-react-app):</p>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="diff --git a/config/webpack/webpack.config.ts b/config/webpack/webpack.config.ts
index fc4bca3fc3..3bd779a7c1 100644
--- a/config/webpack/webpack.config.ts
+++ b/config/webpack/webpack.config.ts
@@ -273,13 +273,13 @@ const config = function (webpackEnv: Configuration['mode'], target = 'web'): Con
           // There will be one main bundle, and one file per asynchronous chunk.
           // In development, it does not produce real files.
           filename: isEnvProduction
-            ? 'static/js/[name].[contenthash:8].js'
+            ? 'static/js/[contenthash:2]/[name].[contenthash:8].js'
             : isEnvDevelopment
             ? 'static/js/bundle.js'
             : undefined,
           // There are also additional JS chunk files if you use code splitting.
           chunkFilename: isEnvProduction
-            ? 'static/js/[name].[contenthash:8].chunk.js'
+            ? 'static/js/[contenthash:2]/[name].[contenthash:8].chunk.js'
             : isEnvDevelopment
             ? 'static/js/[name].chunk.js'
             : undefined,
@@ -715,8 +715,8 @@ const config = function (webpackEnv: Configuration['mode'], target = 'web'): Con
               new MiniCssExtractPlugin({
                 // Options similar to the same options in webpackOptions.output
                 // both options are optional
-                filename: 'static/css/[name].[contenthash:8].css',
-                chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
+                filename: 'static/css/[contenthash:2]/[name].[contenthash:8].css',
+                chunkFilename: 'static/css/[contenthash:2]/[name].[contenthash:8].chunk.css'
               }),
             // Generate an asset manifest file with the following content:
             // - &quot;files&quot; key: Mapping of all asset filenames to their corresponding"><pre class="notranslate"><span class="pl-c1">diff --git a/config/webpack/webpack.config.ts b/config/webpack/webpack.config.ts</span>
index fc4bca3fc3..3bd779a7c1 100644
<span class="pl-md">--- a/config/webpack/webpack.config.ts</span>
<span class="pl-mi1">+++ b/config/webpack/webpack.config.ts</span>
<span class="pl-mdr">@@ -273,13 +273,13 @@</span> const config = function (webpackEnv: Configuration['mode'], target = 'web'): Con
           // There will be one main bundle, and one file per asynchronous chunk.
           // In development, it does not produce real files.
           filename: isEnvProduction
<span class="pl-md"><span class="pl-md">-</span>            ? 'static/js/[name].[contenthash:8].js'</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>            ? 'static/js/[contenthash:2]/[name].[contenthash:8].js'</span>
             : isEnvDevelopment
             ? 'static/js/bundle.js'
             : undefined,
           // There are also additional JS chunk files if you use code splitting.
           chunkFilename: isEnvProduction
<span class="pl-md"><span class="pl-md">-</span>            ? 'static/js/[name].[contenthash:8].chunk.js'</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>            ? 'static/js/[contenthash:2]/[name].[contenthash:8].chunk.js'</span>
             : isEnvDevelopment
             ? 'static/js/[name].chunk.js'
             : undefined,
<span class="pl-mdr">@@ -715,8 +715,8 @@</span> const config = function (webpackEnv: Configuration['mode'], target = 'web'): Con
               new MiniCssExtractPlugin({
                 // Options similar to the same options in webpackOptions.output
                 // both options are optional
<span class="pl-md"><span class="pl-md">-</span>                filename: 'static/css/[name].[contenthash:8].css',</span>
<span class="pl-md"><span class="pl-md">-</span>                chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>                filename: 'static/css/[contenthash:2]/[name].[contenthash:8].css',</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>                chunkFilename: 'static/css/[contenthash:2]/[name].[contenthash:8].chunk.css'</span>
               }),
             // Generate an asset manifest file with the following content:
             // - "files" key: Mapping of all asset filenames to their corresponding</pre></div>
<p dir="auto">produces a <code class="notranslate">Circular hash dependency</code> compilation error. I suspect a reasonably large project and/or many chunks would be required to reliably produce a collision.</p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I expect content hash collisions to be tolerated for folder names.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.51.1<br>
Node.js version: 14.17.5<br>
Operating System: Tested on OSX &amp; Linux</p>