Error: Cyclic dependency after updating nuxt to v2.3.4

user_5053408 0
Viewed 282

Stuck at after chunk asset optimization (93%)

Showing error like this /node_modules/toposort/index.js:35 throw new Error('Cyclic dependency' + nodeRep)

I am getting this error continuously. To update my app I follow the steps carefully but still, nothing comes out. Please look into it.

      throw new Error('Cyclic dependency' + nodeRep)
      ^

Error: Cyclic dependency
    at visit (/var/www/html/app/node_modules/toposort/index.js:35:13)
    at visit (/var/www/html/app/node_modules/toposort/index.js:53:9)
    at visit (/var/www/html/app/node_modules/toposort/index.js:53:9)
    at visit (/var/www/htmlapp/node_modules/toposort/index.js:53:9)
    at Function.toposort [as array] (/var/www/html/app/node_modules/toposort/index.js:22:22)
    at Object.module.exports.dependency (/var/www/html/app/node_modules/html-webpack-plugin/lib/chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (/var/www/html/app/node_modules/html-webpack-plugin/index.js:364:35)

...
webpack-4 nuxt.js
1 Answers

I had the same error when I tried to Lazy Loading multiples Child Components in a Component.

Cause of the issue

The issue is caused by a library called toposort which is used by html-webpack-plugin on versions < 4.0.0 (it was removed).

Nuxt updated the html-webpack-plugin to v4 in the v2.13.

Solutions

Solution 1

Update Nuxt to version v2.13 or a newer one.

Solution 2

If you can't update Nuxt to v2.13 or a newer one, you can apply the following solution in the nuxt.config.js

nuxt.config.js

const htmlPlugin = config.plugins.find(_ => _.constructor.name === 'HtmlWebpackPlugin')
if (htmlPlugin) {
  Object.assign(htmlPlugin.options, { chunksSortMode: 'none' })
}

I got that solution from the following issues reported in the nuxt and vue-cli repositories:

Also, it was the solution applied in vue-cli:

user_121712990
Related