webpack@5.11.1 support with circular dependency

[haripriyaaganesan]

I'm migrating my project from webpack@4.41.2 -> webpack@5.11.1. I'm running into circular dependency issue.

Error: Circular dependency detected:
assets/images/card_auth_illustration.png -> assets/images/card_auth_illustration.png

ERROR in Error: Child compilation failed:
Circular dependency detected:
src/index.html -> src/index.html
Error: Circular dependency detected:
src/index.html -> src/index.html

• index.js:55
  [spa]/[circular-dependency-plugin]/index.js:55:25

• Hook.js:14 Hook.CALL_DELEGATE [as _call]
  [spa]/[webpack]/[tapable]/lib/Hook.js:14:14

• Compilation.js:2048 Compilation.seal
  [spa]/[webpack]/lib/Compilation.js:2048:37

• Compiler.js:1050
  [spa]/[webpack]/lib/Compiler.js:1050:20

• Compilation.js:1877
  [spa]/[webpack]/lib/Compilation.js:1877:4

• FlagDependencyExportsPlugin.js:332
  [spa]/[webpack]/lib/FlagDependencyExportsPlugin.js:332:11

• async.js:2830
  [spa]/[neo-async]/async.js:2830:7

• async.js:2850 Object.each
  [spa]/[neo-async]/async.js:2850:39

• FlagDependencyExportsPlugin.js:311
  [spa]/[webpack]/lib/FlagDependencyExportsPlugin.js:311:18

• async.js:2830
  [spa]/[neo-async]/async.js:2830:7

• async.js:2850 Object.each
  [spa]/[neo-async]/async.js:2850:39

• FlagDependencyExportsPlugin.js:46
  [spa]/[webpack]/lib/FlagDependencyExportsPlugin.js:46:16

• Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
  [spa]/[webpack]/[tapable]/lib/Hook.js:18:14

• Compilation.js:1848 Compilation.finish
  [spa]/[webpack]/lib/Compilation.js:1848:28

• Compiler.js:1045
  [spa]/[webpack]/lib/Compiler.js:1045:19

• task_queues.js:75 processTicksAndRejections
  internal/process/task_queues.js:75:11

• task_queues.js:62 runNextTicks
  internal/process/task_queues.js:62:3

• timers.js:434 processImmediate
  internal/timers.js:434:9

• child-compiler.js:163
  [spa]/[html-webpack-plugin]/lib/child-compiler.js:163:18

• Compiler.js:511
  [spa]/[webpack]/lib/Compiler.js:511:11

• Compiler.js:1059
  [spa]/[webpack]/lib/Compiler.js:1059:17

• Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
  [spa]/[webpack]/[tapable]/lib/Hook.js:18:14

• Compiler.js:1055
  [spa]/[webpack]/lib/Compiler.js:1055:33

• Compilation.js:2180
  [spa]/[webpack]/lib/Compilation.js:2180:10

• Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
  [spa]/[webpack]/[tapable]/lib/Hook.js:18:14

• Compilation.js:2173
  [spa]/[webpack]/lib/Compilation.js:2173:37

• Compilation.js:409
  [spa]/[webpack]/lib/Compilation.js:409:10

• SourceMapDevToolPlugin.js:540
  [spa]/[webpack]/lib/SourceMapDevToolPlugin.js:540:10

• async.js:2830
  [spa]/[neo-async]/async.js:2830:7

• async.js:2857 Object.each
  [spa]/[neo-async]/async.js:2857:9

• SourceMapDevToolPlugin.js:376
  [spa]/[webpack]/lib/SourceMapDevToolPlugin.js:376:17

• async.js:2830
  [spa]/[neo-async]/async.js:2830:7

• async.js:2857 Object.each
  [spa]/[neo-async]/async.js:2857:9

• SourceMapDevToolPlugin.js:204
  [spa]/[webpack]/lib/SourceMapDevToolPlugin.js:204:15

• Compilation.js:398 fn
  [spa]/[webpack]/lib/Compilation.js:398:9

• Compilation.js:381 fn
  [spa]/[webpack]/lib/Compilation.js:381:9

• Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
  [spa]/[webpack]/[tapable]/lib/Hook.js:18:14

• Compilation.js:2147 cont
  [spa]/[webpack]/lib/Compilation.js:2147:33

• Compilation.js:2193
  [spa]/[webpack]/lib/Compilation.js:2193:9

• async.js:2830
  [spa]/[neo-async]/async.js:2830:7

• async.js:2850 Object.each
  [spa]/[neo-async]/async.js:2850:39

• Compilation.js:3258 Compilation.createChunkAssets
  [spa]/[webpack]/lib/Compilation.js:3258:12

webpack.commom.js

const CircularDependencyPlugin = require('circular-dependency-plugin');
plugins: [
new CircularDependencyPlugin({
exclude: /a.js|node_modules/,
include: /src/,
failOnError: true,
})
]

[aackerman]

@haripriyaaganesan which version of the plugin were you using? As of 5.2.2 the intent is to never list a self reference circular dependency.

[Doodidan]

I catch this bug on 5.0.2. Upgrading to 5.2.2 helps me, everything is ok now.

[magicznyleszek]

I'm upgrading webpack from v4 to v5, and and am currently using 5.72.0 with circular-dependency-plugin@5.2.2 and I get a long list of self referencing files. As a temporary solution I did this:

onDetected({paths, compilation}) {
  if (paths.length === 2 && paths[0] === paths[1]) {
    // SKIP IT
  } else {
    compilation.warnings.push(new Error(paths.join(' -> ')));
  }
},

(I use warnings instead of errors)

Turned out I was running it with 5.2.0 as I forgot to npm install after switching branches. Sorry for trouble!