Lazy loading routes Error: Cyclic dependency #1669

antonreshetov · 2018-06-25T04:48:12Z

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)

The text was updated successfully, but these errors were encountered:

antonreshetov · 2018-06-25T06:56:32Z

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 · 2018-06-25T08:21:57Z

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 · 2018-06-25T08:37:52Z

@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 · 2018-06-28T08:33:54Z

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 · 2018-06-28T09:00:37Z

What are you using for unit tests?

Akaryatrh · 2018-06-28T09:13:13Z

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 · 2018-06-28T09:19:43Z

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 · 2018-06-28T10:56:37Z

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 · 2018-11-02T03:38:27Z

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 · 2018-11-02T09:51:12Z

@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 · 2018-12-12T13:56:05Z

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 · 2019-01-25T19:27:19Z

@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 · 2019-02-27T12:09:54Z

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

…advanced/lazy-loading.html 2. change webpack config to workaround vuejs/vue-cli#1669. Can remove after update vue-cli to future release 3. move Landing screen login to main.js 4. add loading indicator and error handling for async route

owlyowl · 2022-03-19T11:23:09Z

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 · 2022-06-30T21:40:43Z

@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!

LinusBorg added the upstream label Jun 25, 2018

yyx990803 closed this as completed in 744c375 Jul 18, 2018

zlab mentioned this issue Jul 29, 2018

vue-cli-service build js和css加载顺序反了 #1978

Closed

yangmingshan mentioned this issue Jul 31, 2018

Still have “Cyclic dependency” problem in development mode #1993

Closed

PanJiaChen mentioned this issue Apr 23, 2019

编译报错 PanJiaChen/vue-element-admin#1952

Open

yunhan0 mentioned this issue Jun 1, 2019

upgrade webpack to v4 yunhan0/koa-vue-fullstack#2

Closed

cklwblove mentioned this issue Sep 9, 2019

修复 Lazy loading routes Error： Cyclic dependency cklwblove/blog#39

Open

gquinteros93 mentioned this issue Aug 4, 2021

Error: Cyclic dependency after updating nuxt to v2.3.4 nuxt/nuxt#4794

Closed

Marinerer mentioned this issue Sep 30, 2021

【vue-cli】配置 Marinerer/store#23

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lazy loading routes Error: Cyclic dependency #1669

Lazy loading routes Error: Cyclic dependency #1669

antonreshetov commented Jun 25, 2018

antonreshetov commented Jun 25, 2018 •

edited

Loading

LinusBorg commented Jun 25, 2018 •

edited

Loading

antonreshetov commented Jun 25, 2018

Akaryatrh commented Jun 28, 2018

LinusBorg commented Jun 28, 2018

Akaryatrh commented Jun 28, 2018

LinusBorg commented Jun 28, 2018

Akaryatrh commented Jun 28, 2018 •

edited

Loading

sueblue commented Nov 2, 2018

LinusBorg commented Nov 2, 2018 •

edited

Loading

waghcwb commented Dec 12, 2018

ProgrammingJoe commented Jan 25, 2019

maxvaschenko commented Feb 27, 2019

owlyowl commented Mar 19, 2022 •

edited

Loading

jshrssll commented Jun 30, 2022

Lazy loading routes Error: Cyclic dependency #1669

Lazy loading routes Error: Cyclic dependency #1669

Comments

antonreshetov commented Jun 25, 2018

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

antonreshetov commented Jun 25, 2018 • edited Loading

LinusBorg commented Jun 25, 2018 • edited Loading

antonreshetov commented Jun 25, 2018

Akaryatrh commented Jun 28, 2018

LinusBorg commented Jun 28, 2018

Akaryatrh commented Jun 28, 2018

LinusBorg commented Jun 28, 2018

Akaryatrh commented Jun 28, 2018 • edited Loading

sueblue commented Nov 2, 2018

LinusBorg commented Nov 2, 2018 • edited Loading

waghcwb commented Dec 12, 2018

ProgrammingJoe commented Jan 25, 2019

maxvaschenko commented Feb 27, 2019

owlyowl commented Mar 19, 2022 • edited Loading

jshrssll commented Jun 30, 2022

antonreshetov commented Jun 25, 2018 •

edited

Loading

LinusBorg commented Jun 25, 2018 •

edited

Loading

Akaryatrh commented Jun 28, 2018 •

edited

Loading

LinusBorg commented Nov 2, 2018 •

edited

Loading

owlyowl commented Mar 19, 2022 •

edited

Loading