Cyclic dependency error

Question

Cyclic dependency error

wladimiiir opened this issue 7 years ago · 32 comments

Latest release causes:

Error: Cyclic dependency: "[object Object]"
    at visit (/app/node_modules/toposort/index.js:32:13)
    at visit (/app/node_modules/toposort/index.js:48:9)
    at Function.toposort [as array] (/app/node_modules/toposort/index.js:25:22)
    at Object.module.exports.dependency (/app/node_modules/html-webpack-plugin/lib/chunksorter.js:55:19)
    at HtmlWebpackPlugin.sortChunks (/app/node_modules/html-webpack-plugin/index.js:347:33)
    at Compiler.<anonymous> (/app/node_modules/html-webpack-plugin/index.js:72:19)
    at Compiler.applyPluginsAsyncSeries (/app/node_modules/tapable/lib/Tapable.js:206:13)
    at Compiler.emitAssets (/app/node_modules/webpack/lib/Compiler.js:308:7)
    at onCompiled (/app/node_modules/webpack/lib/Compiler.js:247:11)
    at /app/node_modules/webpack/lib/Compiler.js:499:13
    at next (/app/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.<anonymous> (/app/node_modules/webpack/lib/CachePlugin.js:62:5)
    at Compiler.applyPluginsAsyncSeries (/app/node_modules/tapable/lib/Tapable.js:206:13)
    at /app/node_modules/webpack/lib/Compiler.js:496:10
    at Compilation.applyPluginsAsyncSeries (/app/node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (/app/node_modules/webpack/lib/Compilation.js:649:19)
    at Compilation.applyPluginsAsyncSeries (/app/node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (/app/node_modules/webpack/lib/Compilation.js:640:11)
    at next (/app/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin (/app/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:230:5)
    at next (/app/node_modules/tapable/lib/Tapable.js:204:14)
    at Compilation.compilation.plugin (/app/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:230:5)
    at Compilation.applyPluginsAsyncSeries (/app/node_modules/tapable/lib/Tapable.js:206:13)
    at self.applyPluginsAsync.err (/app/node_modules/webpack/lib/Compilation.js:635:10)
    at next (/app/node_modules/tapable/lib/Tapable.js:202:11)
    at ExtractTextPlugin.<anonymous> (/app/node_modules/extract-text-webpack-plugin/index.js:345:4)
    at Compilation.applyPluginsAsyncSeries (/app/node_modules/tapable/lib/Tapable.js:206:13)
    at sealPart2 (/app/node_modules/webpack/lib/Compilation.js:631:9)
    at next (/app/node_modules/tapable/lib/Tapable.js:202:11)
    at ExtractTextPlugin.<anonymous> (/app/node_modules/extract-text-webpack-plugin/index.js:317:5)

Let me know if you need more information ;)

petergaal91 commented 7 years ago

+1

ET-1992 commented 7 years ago

+1

hstaniszewski commented 7 years ago

+1

GurpreetSran commented 7 years ago

+1

justboras commented 7 years ago

+1

hlodver commented 7 years ago

+1

timwoodart commented 7 years ago

+1

kasparasg commented 7 years ago

+1

serhiizx commented 7 years ago

+1

Answer 1 · 2017-10-02T13:39:31.000Z

throw new Error('Cyclic dependency: '+JSON.stringify(node)) and followed by same output as above.

Not much changed in terms of environment that this is ran in, hence pinpointing it down to latest release

Answer 2 · 2017-10-02T13:47:51.000Z

For me too - the fix on my side was to downgrade the version of toposort to 1.0.4.

I didn't actually reference this dependency directly - webpack does - just fyi.

Answer 3 · 2017-10-02T13:51:15.000Z

@seanlandsman I think webpack is whats failing us as well, how did you downgrade toposort for it specifically? Never did it before for specific packages, would be cool to know :)

Answer 4 · 2017-10-02T13:55:51.000Z

I'm using yarn, and added this to my package.json:

"resolutions": {
	"toposort": "1.0.4"
}

Answer 5 · 2017-10-02T13:56:45.000Z

npm install toposort@1.0.4

Answer 6 · 2017-10-02T14:09:52.000Z

+1 - affects html webpack plugin

Answer 7 · 2017-10-02T14:11:12.000Z

We're also hitting this. :(

Answer 8 · 2017-10-02T14:13:08.000Z

+1 not too happy, respect semver! :(

Answer 9 · 2017-10-02T14:24:14.000Z

@iljadaderko I added this to package.json

"toposort":"1.0.4"

thanks

Answer 10 · 2017-10-02T14:43:57.000Z

I'm so sorry folks. v1.0.6 is out now, which reverts #19

Answer 11 · 2017-10-02T14:58:42.000Z

Thanks for quick turnaround!

Answer 12 · 2017-10-03T13:17:14.000Z

thanks for the quick fix. Our production build failed yesterday since it's the dependency of html-webpack-plugin

Answer 13 · 2018-04-09T05:03:58.000Z

UPDATE: there's a workaround provided in jantimon/html-webpack-plugin#870 which is working for me at the moment. I'm leaving this comment up in case anybody else is affected.

I'm currently hitting this error in 1.0.6 too (through html-webpack-plugin).

> npm list toposort
rekrn@1.0.0 /Users/aditya/dev/rekrn
└─┬ webpack-config-basic-dev@2.0.0-0
  └─┬ html-webpack-plugin@3.2.0
    └── toposort@1.0.6

I made a new and clean repo to try and reproduce it but wasn't able to:

> npm list toposort
testwebpack4@1.0.0 /Users/aditya/dev/testwebpack4
└─┬ webpack-config-basic-dev@2.0.0-0
  └─┬ html-webpack-plugin@3.2.0
    └── toposort@1.0.6

Any help will be appreciated.

Full error dump:

 95% emitting HtmlWebpackPlugin/Users/aditya/dev/rekrn/node_modules/html-webpack-plugin/node_modules/toposort/index.js:29
      throw new Error('Cyclic dependency: '+JSON.stringify(node))
                                                 ^

TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at visit (/Users/aditya/dev/rekrn/node_modules/html-webpack-plugin/node_modules/toposort/index.js:29:50)
    at visit (/Users/aditya/dev/rekrn/node_modules/html-webpack-plugin/node_modules/toposort/index.js:47:9)
    at visit (/Users/aditya/dev/rekrn/node_modules/html-webpack-plugin/node_modules/toposort/index.js:47:9)
    at visit (/Users/aditya/dev/rekrn/node_modules/html-webpack-plugin/node_modules/toposort/index.js:47:9)
    at Function.toposort [as array] (/Users/aditya/dev/rekrn/node_modules/html-webpack-plugin/node_modules/toposort/index.js:22:22)
    at Object.module.exports.dependency (/Users/aditya/dev/rekrn/node_modules/html-webpack-plugin/lib/chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (/Users/aditya/dev/rekrn/node_modules/html-webpack-plugin/index.js:364:35)
    at /Users/aditya/dev/rekrn/node_modules/html-webpack-plugin/index.js:113:21
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/aditya/dev/rekrn/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:14:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/aditya/dev/rekrn/node_modules/tapable/lib/Hook.js:35:21)
    at Compiler.emitAssets (/Users/aditya/dev/rekrn/node_modules/webpack/lib/Compiler.js:305:19)
    at onCompiled (/Users/aditya/dev/rekrn/node_modules/webpack/lib/Watching.js:50:19)
    at hooks.afterCompile.callAsync.err (/Users/aditya/dev/rekrn/node_modules/webpack/lib/Compiler.js:485:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/aditya/dev/rekrn/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/aditya/dev/rekrn/node_modules/tapable/lib/Hook.js:35:21)

Answer 14 · 2018-04-28T06:18:03.000Z

Reproduction in case anyone needs it. Error is thrown when building angular app in AoT mode.

Answer 15 · 2018-04-28T12:03:08.000Z

Sorry for my absence. Can you reproduce this with toposort only? Alternatively, what does the dependency graph look like?

Answer 16 · 2018-04-28T12:17:19.000Z

So, when I run the build script for the reproduction repo, I get the following edges of the dependency graph:

5005 => 5004,
5003 => 5004,
5004 => 5005,
5003 => 5005

Clearly, there is a cyclic dependency between 5005 and 5004. The only "bug" in toposort, is the type error, if you will, which I'll fix now. :)

Answer 17 · 2018-05-10T11:15:01.000Z

@WiseBird I found that error happiness if html-webpack-plugin uses default chunksSortMode parameter.
For example, you can change it in the following way:

new HtmlWebpackPlugin({
     "template": "./src/index.html",
     "filename": "./index.html",
     "hash": false,
     "inject": true,
     "compile": true,
     "favicon": false,
     "minify": false,
     "cache": true,
     "showErrors": true,
     "chunks": "all",
     "excludeChunks": [],
     "title": "Webpack App",
     "xhtml": true,
     "chunksSortMode": 'none'
   }
 }),

Or use your special function. For example:

const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
...
chunksSortMode: function sort(left, right) {
  let leftIndex = entryPoints.indexOf(left.names[0]);
  let rightIndex = entryPoints.indexOf(right.names[0]);
  if (leftIndex > rightIndex) {
      return 1;
  }
  else if (leftIndex < rightIndex) {
      return -1;
  }
  else {
      return 0;
  }
}
...

Answer 18 · 2018-05-14T22:53:47.000Z

I found that error happiness if html-webpack-plugin uses default chunksSortMode parameter.

@sumbad do you mean that this cyclic dependency error does not occur when chunksSortMode option of HtmlWebpackPlugin is set to 'none'?
If that's what you mean then it's the same for me since I switched to webpack 4.

Should we open an HtmlWebpackPlugin issue?

Answer 19 · 2018-05-14T23:41:27.000Z

@laurentpayot there already is one: jantimon/html-webpack-plugin#870 ;)

Answer 20 · 2018-11-15T09:09:53.000Z

@WiseBird I found that error happiness if html-webpack-plugin uses default chunksSortMode parameter.
For example, you can change it in the following way:

new HtmlWebpackPlugin({
     "template": "./src/index.html",
     "filename": "./index.html",
     "hash": false,
     "inject": true,
     "compile": true,
     "favicon": false,
     "minify": false,
     "cache": true,
     "showErrors": true,
     "chunks": "all",
     "excludeChunks": [],
     "title": "Webpack App",
     "xhtml": true,
     "chunksSortMode": 'none'
   }
 }),

Or use your special function. For example:

const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
...
chunksSortMode: function sort(left, right) {
  let leftIndex = entryPoints.indexOf(left.names[0]);
  let rightIndex = entryPoints.indexOf(right.names[0]);
  if (leftIndex > rightIndex) {
      return 1;
  }
  else if (leftIndex < rightIndex) {
      return -1;
  }
  else {
      return 0;
  }
}
...

厉害了我的哥

Answer 21 · 2018-12-27T20:19:52.000Z

I also get this error without specifying chunksSortMode as none.

Answer 22 · 2019-04-26T17:01:19.000Z

i'm seeing this error with 1.0.7 in a dojo project

$ npm list toposort
project@1.0.0 C:\development\projects\xxx\project
`-- @dojo/cli-build-app@5.0.3
  `-- html-webpack-plugin@3.2.0
    `-- toposort@1.0.7

change chucksSortMode to none fixes it

Answer 23 · 2019-06-05T04:55:20.000Z

@WiseBird I found that error happiness if html-webpack-plugin uses default chunksSortMode parameter.
For example, you can change it in the following way:

new HtmlWebpackPlugin({
     "template": "./src/index.html",
     "filename": "./index.html",
     "hash": false,
     "inject": true,
     "compile": true,
     "favicon": false,
     "minify": false,
     "cache": true,
     "showErrors": true,
     "chunks": "all",
     "excludeChunks": [],
     "title": "Webpack App",
     "xhtml": true,
     "chunksSortMode": 'none'
   }
 }),

Or use your special function. For example:

const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
...
chunksSortMode: function sort(left, right) {
  let leftIndex = entryPoints.indexOf(left.names[0]);
  let rightIndex = entryPoints.indexOf(right.names[0]);
  if (leftIndex > rightIndex) {
      return 1;
  }
  else if (leftIndex < rightIndex) {
      return -1;
  }
  else {
      return 0;
  }
}
...

yes, change to chucksSortMode to none in webpack config file fixes it