Circular hash dependency for hashed folder names

The same https://github.com/webpack/webpack/issues/16858

---

Bug report

What is the current behavior?

A Circular hash dependency compilation error is thrown for hash collisions in folder names.

If the current behavior is a bug, please provide the steps to reproduce.

Applying this patch to my webpack config (from create-react-app):

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:
             // - "files" key: Mapping of all asset filenames to their corresponding

produces a Circular hash dependency compilation error. I suspect a reasonably large project and/or many chunks would be required to reliably produce a collision.

What is the expected behavior?

I expect content hash collisions to be tolerated for folder names.

Other relevant information:
webpack version: 5.51.1
Node.js version: 14.17.5
Operating System: Tested on OSX & Linux

Start with the webpack configuration shown in the report, especially the output filename and chunkFilename patterns using [contenthash:2] as a folder. Compare the behavior with issue #16858 and reproduce the collision; done means hashed folder names tolerate collisions without a Circular hash dependency compilation error.