vue ui: Invariant Violation

[artnova-david]

Version

4.1.1

Environment info

 System:
    OS: Windows 10 10.0.18362
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.16.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @kazupon/vue-i18n-loader: ^0.5.0 => 0.5.0
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  4.0.3
    @vue/babel-preset-jsx:  1.1.1
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.1.1
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  4.0.3
    @vue/cli-plugin-babel: ^4.0.3 => 4.0.3
    @vue/cli-plugin-eslint: ^4.0.3 => 4.0.3
    @vue/cli-plugin-router:  4.0.3
    @vue/cli-plugin-vuex:  4.0.3
    @vue/cli-service: ^4.0.3 => 4.0.3
    @vue/cli-shared-utils:  4.0.3
    @vue/component-compiler-utils:  3.0.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3
    vue: ^2.6.11 => 2.6.11
    vue-eslint-parser:  undefined (5.0.0)
    vue-hot-reload-api:  2.3.4
    vue-i18n: ^8.15.3 => 8.15.3
    vue-loader:  15.7.1
    vue-router: ^3.1.5 => 3.1.5
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vuelidate: ^0.7.5 => 0.7.5
    vuex: ^3.1.2 => 3.1.2
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

run command "vue ui" from terminal

What is expected?

Project dashboard to appear

What is actually happening?

Dashboard doesn't load, progress spinner does not dissapear. After refresh with F-5 dashboard loads and all works correctly.

---

When inspecting the devtools the following error(s) occur:

forced theme null theme.js:8:8 Firefox can’t establish a connection to the server at ws://localhost:8005/graphql. client.js:427:22 The connection to ws://localhost:8005/graphql was interrupted while the page was loading. client.js:427:22 [UI] Apollo store reset vue-apollo.js:71:10 An error occurred vue-apollo.js:59:12 Network error: Invariant Violation: 16 (see https://github.com/apollographql/invariant-packages) vue-apollo.js:60:12 Array [] vue-apollo.js:62:14 Invariant Violation: "Invariant Violation: 16 (see https://github.com/apollographql/invariant-packages)" t invariant.esm.js:12 clearStore bundle.esm.js:1420 clearStore bundle.esm.js:1419 resetStore bundle.esm.js:2058 promise callbacka6f7/V</e.prototype.resetStore bundle.esm.js:2058 V vue-apollo.js:80 l runtime.js:45 M runtime.js:271 t runtime.js:97 l runtime.js:45 t runtime.js:135 t runtime.js:145 promise callbackt runtime.js:144 i runtime.js:170 i runtime.js:169 i runtime.js:192 t runtime.js:97 async runtime.js:216 V vue-apollo.js:70 ca94 vue-apollo.js:108 l runtime.js:45 M runtime.js:271 t runtime.js:97 l runtime.js:45 t runtime.js:135 i runtime.js:170 i runtime.js:169 i runtime.js:192 t runtime.js:97 async runtime.js:216 ca94 vue-apollo.js:107 emit index.js:180 processReceivedData client.js:493 onmessage client.js:466 connect client.js:464 tryReconnectTimeoutId client.js:396 setTimeout handlerca16/</_</e.prototype.tryReconnect client.js:395 close client.js:115 maxConnectTimeoutId client.js:421 setTimeout handlerca16/</_</e.prototype.checkMaxConnectTimeout client.js:418 connect client.js:428 e client.js:85 b index.js:138 ca94 vue-apollo.js:39 Webpack 12

[artnova-david]

Has anyone has had this problem before?

[wind83410]

Hi, I just got the same problem when I ran command "vue ui" on Microsoft cmd and browsed it on Chrome. The attached picture shows errors on console. (version 4.3.1)

[artnova-david]

Until now I didn't found a solution for this problem. Running v 4.4.1 at the moment

[haoqunjiang]

What about deleting the ~/.vue-cli-ui folder and then restarting the UI?

I have no idea why this happens and can't reproduce it by myself.

[artnova-david]

@sodatea , now tried this already, deleted the .vue-cli-ui folder and reimported my project. Then started the ui, and the first run didn't show any errors. Rebooted my machine and the error showed again.

[haoqunjiang]

That's confusing… Is there anything special about the particular project or does it happen for all projects?

[artnova-david]

This is the first project with Vue UI. Don't know what could be special about it, do you mean about settings, dependencies or plugins...? Like I said it only happens when I first start the project with the CLI when I refresh (F5) the error won't show again and all runs fine. I tried searching online but no success so far. I do have some project specific settings in package.json like "build": "vue-cli-service build", "lint": "vue-cli-service lint", "build:base-app": "cross-env VUE_APP_NAME=base-app vue-cli-service build", "serve:base-app": "cross-env VUE_APP_NAME=base-app vue-cli-service serve" But the error occures at Vue Ui startup not when running the build/serve task for a project.

[tristansokol]

I ran into this issue as part of a big jump in upgrading the vue cli. Deleting ~/.vue-cli-ui and trying again worked for me.