Nuxt.js: Error: Cyclic dependency

Created on 24 Sep 2018  路  8Comments  路  Source: nuxt/nuxt.js

Version

v2.0.0

Reproduction link

https://github.com/vuejs/vue-cli/issues/1351

Steps to reproduce

use nuxt2 ,cli display Error: Cyclic dependency

modifer node_modules/nuxt/dist/nuxt.js:3226

new HTMLPlugin({
        filename: '../server/index.spa.html',
        template: this.options.appTemplatePath,
        minify: true,
        inject: true,
        chunksSortMode: 'none'
      })

chunksSortMode set 'none' but not 'dependency' or 'auto' could fix this error

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveLibConfig.js#L61

What is expected ?

same with vue-cli 3

What is actually happening?

Error: Cyclic dependency

This bug report is available on Nuxt community (#c7811)
bug-report stale
Source
picture ac88
👍2

All 8 comments

same

gerasimvol picture gerasimvol on 24 Sep 2018

I`m not quite follow how to reproduce this issue?

aldarund picture aldarund on 24 Sep 2018

i solved this use 

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

in nuxt.config.js build extend

ac88 picture ac88 on 24 Sep 2018

I get a similar issue even when extending the config as @ac88 has described, but like this:

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

I've read that this can happen if vue-loader and html-webpack-plugin both try and read the same file. I've just come across this while trying to upgrade to Nuxt 2.

Here's the output I have.

app_1      | yarn install v1.5.1
app_1      | [1/4] Resolving packages...
app_1      | success Already up-to-date.
app_1      | Done in 1.31s.
app_1      | yarn run v1.5.1
app_1      | $ nuxt
app_1      | [21:10:16] Building project
app_1      | ** Nuxt building...
app_1      | [21:10:25] Building project
app_1      | Manifest meta already provided!
app_1      | [21:10:31] Builder initialized
app_1      | [21:10:31] Builder initialized
app_1      | [21:10:32] Nuxt files generated
app_1      | [21:10:33] Compiling client
app_1      | [21:10:33] Compiling server
app_1      | (node:51) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
app_1      | [21:10:33] Nuxt files generated
app_1      | [21:11:17] Compiled server in 44s
app_1      | [21:11:17] Compiling server
app_1      | [21:11:17] Compiled server in 1ms
app_1      | /usr/src/app/node_modules/toposort/index.js:35
app_1      |       throw new Error('Cyclic dependency' + nodeRep)
app_1      |       ^
app_1      | 
app_1      | Error: Cyclic dependency
app_1      |     at visit (/usr/src/app/node_modules/toposort/index.js:35:13)
app_1      |     at visit (/usr/src/app/node_modules/toposort/index.js:53:9)
app_1      |     at visit (/usr/src/app/node_modules/toposort/index.js:53:9)
app_1      |     at visit (/usr/src/app/node_modules/toposort/index.js:53:9)
app_1      |     at visit (/usr/src/app/node_modules/toposort/index.js:53:9)
app_1      |     at Function.toposort [as array] (/usr/src/app/node_modules/toposort/index.js:22:22)
app_1      |     at Object.module.exports.dependency (/usr/src/app/node_modules/html-webpack-plugin/lib/chunksorter.js:50:35)
app_1      |     at HtmlWebpackPlugin.sortChunks (/usr/src/app/node_modules/html-webpack-plugin/index.js:364:35)
app_1      |     at /usr/src/app/node_modules/html-webpack-plugin/index.js:113:21
app_1      |     at _err3 (eval at create (/usr/src/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:40:1)
app_1      |     at /usr/src/app/node_modules/@nuxtjs/manifest/index.js:68:9
app_1      |     at _err2 (eval at create (/usr/src/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:33:1)
app_1      |     at /usr/src/app/node_modules/@nuxtjs/manifest/index.js:68:9
app_1      |     at _err1 (eval at create (/usr/src/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:26:1)
app_1      |     at /usr/src/app/node_modules/@nuxtjs/icon/index.js:105:13
app_1      |     at _err0 (eval at create (/usr/src/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:19:1)
silverbackdan picture silverbackdan on 26 Sep 2018

Also tried [email protected] to at least get around the Cyclic error.

I then had an eslint-loader error which appeared after the above change 'Cannot read property 'eslint' of undefined' which required an upgrade to version >2.0.0 (latest is currently 2.1.1) - this reintroduced the Cyclic error.

I've then gone through my dependencies making sure they are all up to date.

I am running this inside docker using the image node:9-alpine - I changed this to node:alpine to use the latest version. This updated to yarn 1.9.4 from 1.5.1 - still having the same Cyclic issue.

app_1      | yarn install v1.9.4
app_1      | [1/4] Resolving packages...
app_1      | success Already up-to-date.
app_1      | Done in 1.21s.
app_1      | yarn run v1.9.4
app_1      | $ nuxt
app_1      | [9:42:13 PM] Building project
app_1      | ** Nuxt building...
app_1      | [9:42:24 PM] Building project
app_1      | [9:42:28 PM] Builder initialized
app_1      | Manifest meta already provided!
app_1      | [9:42:30 PM] Builder initialized
app_1      | [9:42:31 PM] Nuxt files generated
app_1      | [9:42:32 PM] Compiling client
app_1      | [9:42:32 PM] Compiling server
app_1      | (node:51) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
app_1      | [9:42:32 PM] Nuxt files generated
app_1      | [9:43:17 PM] Compiled server in 45s
app_1      | [9:43:17 PM] Compiling server
app_1      | [9:43:18 PM] Compiled server in 551ms
app_1      | /usr/src/app/node_modules/toposort/index.js:35
app_1      |       throw new Error('Cyclic dependency' + nodeRep)
app_1      |       ^
app_1      | 
app_1      | Error: Cyclic dependency
app_1      |     at visit (/usr/src/app/node_modules/toposort/index.js:35:13)
app_1      |     at visit (/usr/src/app/node_modules/toposort/index.js:53:9)
app_1      |     at visit (/usr/src/app/node_modules/toposort/index.js:53:9)
app_1      |     at visit (/usr/src/app/node_modules/toposort/index.js:53:9)
app_1      |     at visit (/usr/src/app/node_modules/toposort/index.js:53:9)
app_1      |     at Function.toposort [as array] (/usr/src/app/node_modules/toposort/index.js:22:22)
app_1      |     at Object.module.exports.dependency (/usr/src/app/node_modules/nuxt/node_modules/html-webpack-plugin/lib/chunksorter.js:50:35)
app_1      |     at HtmlWebpackPlugin.sortChunks (/usr/src/app/node_modules/nuxt/node_modules/html-webpack-plugin/index.js:364:35)
app_1      |     at /usr/src/app/node_modules/nuxt/node_modules/html-webpack-plugin/index.js:113:21
app_1      |     at _err3 (eval at create (/usr/src/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:40:1)
app_1      |     at /usr/src/app/node_modules/@nuxtjs/manifest/index.js:68:9
app_1      |     at _err2 (eval at create (/usr/src/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:33:1)
app_1      |     at /usr/src/app/node_modules/@nuxtjs/icon/index.js:105:13
app_1      |     at _err1 (eval at create (/usr/src/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:26:1)
app_1      |     at /usr/src/app/node_modules/@nuxtjs/manifest/index.js:68:9
app_1      |     at _err0 (eval at create (/usr/src/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:19:1)
app_1      | error Command failed with exit code 1.
app_1      | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
componentswebapp_app_1 exited with code 1

EDIT:
The plugin appears to be used twice so using the following to extend the build options in the Nuxt config file did the trick for me to fix the Cyclic error in the end:

for (let plugin of config.plugins) {
  if (plugin.constructor.name === 'HtmlWebpackPlugin') {
    plugin.options = Object.assign(plugin.options, { chunksSortMode: 'none' })
  }
}
silverbackdan picture silverbackdan on 26 Sep 2018
👍1

@silverbackdan thanks.

benfavre picture benfavre on 8 Oct 2018
👍1

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

stale[bot] picture stale[bot] on 31 Oct 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

lock[bot] picture lock[bot] on 7 Dec 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

msudgh picture msudgh  路  3Comments
mattdharmon picture mattdharmon  路  3Comments
vadimsg picture vadimsg  路  3Comments
lazycrazy picture lazycrazy  路  3Comments
nassimbenkirane picture nassimbenkirane  路  3Comments