[email protected] support with circular dependency

[haripriyaaganesan]

I'm migrating my project from [email protected] -> [email protected]. 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 [email protected] 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!