Skip to content

Lazy loading routes Error: Cyclic dependency #1669

@antonreshetov

Description

@antonreshetov

Version

3.0.0-rc.3

Reproduction link

https://github.com/antonreshetov/vue-cli-3-error-reproduction

Steps to reproduce

Create http service to which the router is imported
Connect http service to more than one component
Use lazy loading of components in the router

What is expected?

Compile without errors, as it was before

What is actually happening?

95% emitting HtmlWebpackPlugin/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/toposort/index.js:35
      throw new Error('Cyclic dependency'   nodeRep)
      ^

Error: Cyclic dependency
    at visit (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/toposort/index.js:35:13)
    at visit (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/toposort/index.js:53:9)
    at visit (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/toposort/index.js:53:9)
    at Function.toposort [as array] (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/toposort/index.js:22:
22)
    at Object.module.exports.dependency (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/html-webpack-plug
in/lib/chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/html-webpack-plugin/i
ndex.js:364:35)
    at /Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/html-webpack-plugin/index.js:113:21
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_module
s/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:12:1)
    at Compiler.emitAssets (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/webpack/lib/Compiler.js:311:19
)
    at onCompiled (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/webpack/lib/Watching.js:50:19)
    at hooks.afterCompile.callAsync.err (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/webpack/lib/Compiler.js:500:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
    at compilation.seal.err (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/webpack/lib/Compiler.js:497:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeAssets.callAsync.err (/Users/antonreshetov/www/_sandbox/vue-test-cli-3-error/node_modules/webpack/lib/Compilation.js:986:35)

Activity

antonreshetov

antonreshetov commented on Jun 25, 2018

@antonreshetov
Author

To solve the problem I found a way out, add configuration to html-webpack-plugin

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].chunksSortMode = 'none'
      return args
    })
  }
}
LinusBorg

LinusBorg commented on Jun 25, 2018

@LinusBorg
Member

This seems to be a problem with a dependency of the html-webpack-plugin, named toposort:

jantimon/html-webpack-plugin#981
marcelklehr/toposort#20 (closed)
marcelklehr/toposort#25 (open)

Not much we can do about this...

antonreshetov

antonreshetov commented on Jun 25, 2018

@antonreshetov
Author

@LinusBorg may be set none by default? Based on the comment jantimon/html-webpack-plugin#870 (comment) of the html-webpack-plugin author, for webpack v4 does not matter the order of scripts

Akaryatrh

Akaryatrh commented on Jun 28, 2018

@Akaryatrh

To solve the problem I found a way out, add configuration to html-webpack-plugin

Works perfectly, but issue appears as well when launching tests (npm run test:unit). Does vue-cli takes webpack options defined in vue.config.js when building app for tests?

LinusBorg

LinusBorg commented on Jun 28, 2018

@LinusBorg
Member

What are you using for unit tests?

Akaryatrh

Akaryatrh commented on Jun 28, 2018

@Akaryatrh

Well, I'm using vue-cli setup. When i created the project I selected Mocha + Chai. Issue happens as soon as I'm importing a file of mine in my spec file, Eg:

import MyService from '@/path/to/my/service'

LinusBorg

LinusBorg commented on Jun 28, 2018

@LinusBorg
Member

When i created the project I selected Mocha + Chai.

That's what I wanted to know.

That setup uses the same config, basically. it definitely adds the same custom configs of yours, but at the same time, it changes some internal configs to be suitable for mocha, but those don't touch the html plugin.

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-unit-mocha/index.js

Maybe removing the plugin completely when ``process.env.NODE_ENV === 'test'`?

Akaryatrh

Akaryatrh commented on Jun 28, 2018

@Akaryatrh

I don't know if It's feasible from vue.config.js file? (i tried but had hard time understanding webpack-chaincapabilities)

EDIT: deleting html plugin of course raise a lot of errors and using a webpack plugin like LimitChunkCountPlugin doesn't solve the issue as well… For now conditionally lazy load modules should do the job until vue-cli uses webpack 4.

sueblue

sueblue commented on Nov 2, 2018

@sueblue

To solve the problem I found a way out, add configuration to html-webpack-plugin

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].chunksSortMode = 'none'
      return args
    })
  }
}

hi, i have a error TypeError: Cannot set property 'chunksSortMode' of undefined , is there need me to config?

LinusBorg

LinusBorg commented on Nov 2, 2018

@LinusBorg
Member

@sueblue are you using the pages feature? In that case, there are multiple instance of the webpack plugin (one for each page) and they are named like 'html-nameOfThePage'.

Run this to see what your plugins are named:

npx vue-cli-service inspect --plugins
waghcwb

waghcwb commented on Dec 12, 2018

@waghcwb

For those using Nuxt.js, this workaround solves the issue without installing new plugins

nuxt.config.js

// HtmlWebpackPlugin
const HtmlWebpackPlugin = config.plugins.find(plugin => {
  return plugin.constructor.name === 'HtmlWebpackPlugin'
})

HtmlWebpackPlugin.options.chunksSortMode = 'none'
ProgrammingJoe

ProgrammingJoe commented on Jan 25, 2019

@ProgrammingJoe

@Akaryatrh could you expand a little bit more on how you got passed this issue? I have the exact same issue with mocha chai for testing which was setup with the vue CLI. This issue only happens when testing and it only happens when some of my components are imported and used but not all of them.

maxvaschenko

maxvaschenko commented on Feb 27, 2019

@maxvaschenko

for me helps installing of "html-webpack-plugin": "4.0.0-alpha.1" version

owlyowl

owlyowl commented on Mar 19, 2022

@owlyowl

I happened to get this error around toposort as well.
I tried the suggested fix above in chainWebpack but then received:

Cannot call .tap() on a plugin that has not yet been defined. Call plugin('html').use(<Plugin>) first.

Running npx vue-cli-service inspect --plugins shows 'html' in the list but then when running a build and in my chain console logging plugins I get:

'vue-loader' => {
      parent: [Object],
      store: [Map],
      name: 'vue-loader',
      type: 'plugin',
      shorthands: [Array],
      init: [Function (anonymous)]
    },
    'define' => {
      parent: [Object],
      store: [Map],
      name: 'define',
      type: 'plugin',
      shorthands: [Array],
      init: [Function (anonymous)]
    },
    'case-sensitive-paths' => {
      parent: [Object],
      store: [Map],
      name: 'case-sensitive-paths',
      type: 'plugin',
      shorthands: [Array],
      init: [Function (anonymous)]
    },
    'friendly-errors' => {
      parent: [Object],
      store: [Map],
      name: 'friendly-errors',
      type: 'plugin',
      shorthands: [Array],
      init: [Function (anonymous)]
    },
    'extract-css' => {
      parent: [Object],
      store: [Map],
      name: 'extract-css',
      type: 'plugin',
      shorthands: [Array],
      init: [Function (anonymous)]
    },
    'optimize-css' => {
      parent: [Object],
      store: [Map],
      name: 'optimize-css',
      type: 'plugin',
      shorthands: [Array],
      init: [Function (anonymous)]
    },
    'hash-module-ids' => {
      parent: [Object],
      store: [Map],
      name: 'hash-module-ids',
      type: 'plugin',
      shorthands: [Array],
      init: [Function (anonymous)]
    },
    'fork-ts-checker' => {
      parent: [Object],
      store: [Map],
      name: 'fork-ts-checker',
      type: 'plugin',
      shorthands: [Array],
      init: [Function (anonymous)]
    }

It looks like it is a dependency of fork-ts-checker in this case?

jshrssll

jshrssll commented on Jun 30, 2022

@jshrssll

@owlyowl did you find a solution to this? I'm trying to bundle a bunch of Vue components into a library and running into this exact issue. I've tried several things but considering using another tool like Rollup to bundle it manually. Keen to get your insights. Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Akaryatrh@LinusBorg@owlyowl@waghcwb@ProgrammingJoe

        Issue actions

          Lazy loading routes Error: Cyclic dependency · Issue #1669 · vuejs/vue-cli