执行 vue ui 命令时出现错误： ERROR TypeError: Cannot read properties of undefined (reading 'on')

[learnguos]

Version

5.0.4

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 5825U with Radeon Graphics
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.10.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (103.0.1264.44)
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

执行 vue ui 命令时出现以下错误语句：

Persisted queries are enabled and are using an unbounded cache. Your server is vulnerable to denial of service attacks via memory exhaustion. Set cache: "bounded" or persistedQueries: false in your ApolloServer constructor, or see https://go.apollo.dev/s/cache-backends for other alternatives.

ERROR TypeError: Cannot read properties of undefined (reading 'on')

TypeError: Cannot read properties of undefined (reading 'on')
at ui (C:\Users\Administrator\AppData\Roaming\npm\node_modules@vue\cli\lib\ui.js:90:14)
at processTicksAndRejections (node:internal/process/task_queues:96:5)

What is expected?

出现的错误给出了解决·方案，但是我不知道如何寻找ApolloServer构造函数设置' cache: "bounded"或者' persistedQueries: false '

What is actually happening?

出现错误语句，浏览器没有打开可视面板

[horans]

it's a new issue, not happened until yesterday.
same situation at 5.0.6, different error thrown at 5.0.7:

TypeError: server.installSubscriptionHandlers is not a function
    at module.exports (C:\Users\xxxxxx\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\@vue\cli-ui\graphql-server.js:165:10)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ui (C:\Users\xxxxxx\AppData\Roaming\npm\node_modules\@vue\cli\lib\ui.js:71:26)

btw, only affects ui command, npm run serve goes fine.

[learnguos]

这是一个新问题，直到昨天才发生。 相同的情况5.0.6，不同的错误抛出5.0.7：

TypeError: server.installSubscriptionHandlers is not a function
    at module.exports (C:\Users\xxxxxx\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\@vue\cli-ui\graphql-server.js:165:10)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ui (C:\Users\xxxxxx\AppData\Roaming\npm\node_modules\@vue\cli\lib\ui.js:71:26)

顺便说一句，只影响 ui 命令，npm run serve一切正常。

Yes, this caused all the 5.x versions I installed to be unusable

[etekweb]

I am experiencing this issue after updating Vue-CLI as well. Downgrading back to an older version does not help.

[learnguos]

更新 Vue-CLI 后我也遇到了这个问题。降级回旧版本没有帮助。

I can fix this by going back to 4.x, and maybe you can try it too.

[etekweb]

That does work for me as a workaround for now, though isn't an ideal solution. Especially since the UI feature was working fine on 5.x earlier today.

From digging into vue-cli source a bit, they updated the @vue/cli-ui package's Apollo server today which seems to be causing the issue:
"apollo-server-express": "^3.9.0",

When I downgrade @vue/cli, the updated @vue/cli-ui package (which requires the updated apollo-server-express) doesn't downgrade with it unless I go all the way back to 4.x. From npm list -g apollo-server-express on a downgraded @vue/cli, notice that apollo-server-express is still version 3.9.0:

└─┬ @vue/cli@5.0.5
  └─┬ @vue/cli-ui@5.0.7
    └── apollo-server-express@3.9.0

[RWBDante]

I found that the rollback version did not work because the 5.x dependencies were all 5.x.x, so the rollback cli was still using the 5.0.7 version of the UI. i changed the UI related dependencies to 5.0.6 in the 5.0.6 version of package.json, then reinstalled it and found that it worked. This method is not very safe, a good way would be to use resolution, but I don't know how to install globally using resolution

[learnguos]

I found that the rollback version did not work because the 5.x dependencies were all 5.x.x, so the rollback cli was still using the 5.0.7 version of the UI. i changed the UI related dependencies to 5.0.6 in the 5.0.6 version of package.json, then reinstalled it and found that it worked. This method is not very safe, a good way would be to use resolution, but I don't know how to install globally using resolution

I have successfully solved this problem according to your suggestion. Thank you very much!

[learnguos]

@PsssssssHao @horans @etekweb
如果出现当前的问题我目前的解决方案是：
方案—：
将版本回退到 4.x
方案二：
第一步：请将您的版本回退到 5.0.6 或以下
第二步：删除 node_modules 依赖包文件夹
第三步：请修改 package.json 文件中的代码，以安装的版本 5.0.4为列：
@vue/cli-shared-utils": "^5.0.4" 修改为 @vue/cli-shared-utils": "5.0.4"
@vue/cli-ui": "^5.0.4" 修改为 @vue/cli-ui": "5.0.4"
@vue/cli-ui-addon-webpack": "^5.0.4" 修改为 @vue/cli-ui-addon-webpack": "5.0.4"
@vue/cli-ui-addon-widgets": "^5.0.4" 修改为 @vue/cli-ui-addon-widgets": "5.0.4"

第四步：根据 package.json 文件重新安装依赖即可解决

---

If there are current problems, my current solutions are as follows:
Solution a:
Roll back version to 4.x
Solution b:
Step 1: Please roll back your version to 5.0.6 or below
Step 2: Delete the node_modules dependency package folder
Step 3: Modify the code in the package.json file as the installed version 5.0.4:
@vue/cli-shared-utils": "^5.0.4" Modified to @vue/cli-shared-utils": "5.0.4"
@vue/cli-ui": "^5.0.4" Modified to @vue/cli-ui": "5.0.4"
@vue/cli-ui-addon-webpack": "^5.0.4" Modified to @vue/cli-ui-addon-webpack": "5.0.4"
@vue/cli-ui-addon-widgets": "^5.0.4" Modified to @vue/cli-ui-addon-widgets": "5.0.4"
Step 4: Reinstall dependencies from package.json

[simpleRobort]

same problem happened today,, Roll back @vue/cli to 4.x will fix it