-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
Closed
Labels
Description
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)
DRoet, Akaryatrh, matrunchyk, isneezy, cloudpbx-alex and 7 morematrunchyk and isneezy
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
antonreshetov commentedon Jun 25, 2018
To solve the problem I found a way out, add configuration to html-webpack-plugin
LinusBorg commentedon Jun 25, 2018
This seems to be a problem with a dependency of the
html-webpack-plugin
, namedtoposort
:jantimon/html-webpack-plugin#981
marcelklehr/toposort#20 (closed)
marcelklehr/toposort#25 (open)
Not much we can do about this...
antonreshetov commentedon Jun 25, 2018
@LinusBorg may be set
none
by default? Based on the comment jantimon/html-webpack-plugin#870 (comment) of thehtml-webpack-plugin
author, for webpack v4 does not matter the order of scriptsAkaryatrh commentedon Jun 28, 2018
Works perfectly, but issue appears as well when launching tests (
npm run test:unit
). Doesvue-cli
takes webpack options defined invue.config.js
when building app for tests?LinusBorg commentedon Jun 28, 2018
What are you using for unit tests?
Akaryatrh commentedon Jun 28, 2018
Well, I'm using
vue-cli
setup. When i created the project I selectedMocha
+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 commentedon Jun 28, 2018
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 commentedon Jun 28, 2018
I don't know if It's feasible from
vue.config.js
file? (i tried but had hard time understandingwebpack-chain
capabilities)EDIT: deleting
html
plugin of course raise a lot of errors and using awebpack
plugin likeLimitChunkCountPlugin
doesn't solve the issue as well… For now conditionally lazy load modules should do the job untilvue-cli
uses webpack 4.sueblue commentedon Nov 2, 2018
hi, i have a error TypeError: Cannot set property 'chunksSortMode' of undefined , is there need me to config?
LinusBorg commentedon Nov 2, 2018
@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:
waghcwb commentedon Dec 12, 2018
For those using Nuxt.js, this workaround solves the issue without installing new plugins
nuxt.config.js
ProgrammingJoe commentedon Jan 25, 2019
@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 commentedon Feb 27, 2019
for me helps installing of "html-webpack-plugin": "4.0.0-alpha.1" version
1. implement code splitting by routes https://router.vuejs.org/guide/…
owlyowl commentedon Mar 19, 2022
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:
It looks like it is a dependency of fork-ts-checker in this case?
jshrssll commentedon Jun 30, 2022
@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!