Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Every time I start a project with the official Vue extension, I get an error in vscode from the change monitor #4848

Open
cerm88 opened this issue Sep 14, 2024 · 9 comments

Comments

@cerm88
Copy link

cerm88 commented Sep 14, 2024

Vue - Official extension or vue-tsc version

v2.1.6

VSCode version

v1.93.1

Vue version

v3.4.29

TypeScript version

Only Js and TS any version

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 19.30 GB / 31.86 GB
 Binaries:
    Node: 20.16.0 - C:\Program Files\nodejs\node.EXE      
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.9.0 - ~\AppData\Local\pnpm\pnpm.EXE
 Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355

package.json dependencies

{
"dependencies": {
    "@material-symbols/svg-400": "0.22.2",
    "@vee-validate/yup": "4.13.2",
    "@vueuse/core": "10.11.1",
    "axios": "1.7.3",
    "dayjs": "1.11.13",
    "jwt-decode": "4.0.0",
    "maska": "3.0.0",
    "pinia": "2.1.7",
    "vee-validate": "4.13.2",
    "vue": "3.4.29",
    "vue-router": "4.3.3",
    "yup": "1.4.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "1.8.0",
    "@vitejs/plugin-vue": "5.0.5",
    "@vue/eslint-config-prettier": "9.0.0",
    "@vue/test-utils": "2.4.6",
    "eslint": "8.57.0",
    "eslint-plugin-import": "2.29.1",
    "eslint-plugin-vue": "9.23.0",
    "jsdom": "24.1.0",
    "postcss-preset-env": "10.0.0",
    "prettier": "3.2.5",
    "sass": "1.77.8",
    "stylelint": "16.8.1",
    "stylelint-config-prettier-scss": "1.0.0",
    "stylelint-config-recess-order": "5.0.1",
    "stylelint-config-recommended-vue": "1.5.0",
    "stylelint-config-standard-scss": "13.1.0",
    "stylelint-scss": "6.4.1",
    "vite": "5.3.1",
    "vite-svg-loader": "5.1.0",
    "vitest": "1.6.0"
  }
}

Steps to reproduce

  • I open the Vue project from vscode where I have a profile exclusively with Vue extensions
  • Then I get the following message in the notifications "The file change monitor has stopped unexpectedly."
  • I know it is exactly the official Vue extension because when I disable it the problem disappears

image

What is expected?

The Vue Devtools extension's file change monitor is expected to work seamlessly, detecting and reflecting in real-time any modifications made to Vue components. When you save changes to a .vue file, the component view is expected to automatically update to display the changes made.

What is actually happening?

Change monitor stops unexpectedly when saving changes to a Vue component, displaying the message "File Change Monitor stopped unexpectedly". This occurs consistently when working with large projects. The interruption of the change monitor forces you to manually reload the window to view the changes, which breaks your workflow.

Link to minimal reproduction

No response

Any additional comments?

No response

@davidmatter
Copy link
Collaborator

Hey @cerm88, would you please list your installed extensions? Does it happen too when you only activate the vue extension?

@cerm88
Copy link
Author

cerm88 commented Sep 16, 2024

Hi @davidmatter the installed extensions are the following:
image

By disabling the official Vue extension the problem is quickly eliminated, meaning that the problem is due to said extension.

I also attached my Vue VSCode profile for you to try:
Frontend Vue.zip

@davidmatter
Copy link
Collaborator

I mean the other way around. Please try with an empty profile and only the Vue extension activated, thanks.

@cerm88
Copy link
Author

cerm88 commented Sep 17, 2024

Even leaving the profile empty and only enabling the Vue extension, the same problem occurs to me, ultimately, it is the extension

image

@RayGuo-ergou
Copy link
Contributor

can you check the typescript version attached to typescript extension?

@cerm88
Copy link
Author

cerm88 commented Sep 17, 2024

can you check the typescript version attached to typescript extension?

Remember that the Official Vue extension with TS is no longer available, and if I try to install it with .vsix it doesn't work either

@RayGuo-ergou
Copy link
Contributor

typescript server is always running underness, enable hybrid (take over mode) or not only changes the way to communicate with typescript server. Thus, it's very likely outdated typescript version would be the cause of this issue.

@cerm88
Copy link
Author

cerm88 commented Sep 18, 2024

@davidmatter @RayGuo-ergou
This usually happens to me when I am on a project where there are many components, that is, a large project.

@RayGuo-ergou
Copy link
Contributor

Try to assign more memory to tsserver then. If still happening please create a minimal reproduction.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants