vue-cli: Lazy loading routes Error: Cyclic dependency

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)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 14
Comments: 15 (4 by maintainers)

Commits related to this issue

1. implement code splitting by routes https://router.vuejs.org/guide/advanced/lazy-loading.html 2. change webpack config to workaround https://github.com/vuejs/vue-cli/issues/1669. Can remove after up... — committed to measurabledatatoken/mymdt by chochihim 6 years ago

Most upvoted comments

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
    })
  }
}

+32

antonreshetov on Jun 25, 2018

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?

+12

sueblue on Nov 2, 2018

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

+11

maxvaschenko on Feb 27, 2019

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'

waghcwb on Dec 12, 2018