search

microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
164.95k stars 29.53k forks source link

Vite HMR hangs after putting a breakpoint. #232702

Closed marekv1 closed 1 month ago

marekv1 commented 1 month ago

Type: Bug

I updated to october version and when i put a breakpoint somewhere the browser "msedge" will hang. I did it with opened devtools and it paused the degugger at vite HMR client: 

const hmrConfigName = "vite.config.js";

Image I tried this also with insiders version and no luck. After downgrade to september release everything works the same. vite@5.4.0 . This happens anywhere i have vite HMR in my project.

Example launch.json:

{
            "name": "Attach storybook html edge",
            "type": "msedge",
            "request": "attach",
            // "timeout": 1000000,
            "port": 9222,
            "sourceMaps": true,
            // "smartStep": true,
            "webRoot": "${workspaceFolder}/",
            "urlFilter": "http://localhost:6006/*",
            "url": "http://localhost:6006",
            "pathMapping": {
                "/node_modules": "${workspaceFolder}/node_modules/*"
            },
            "resolveSourceMapLocations": [
                "${workspaceFolder}/**",
                "!**/node_modules/**"
            ],
            "preLaunchTask": "MS-Edge",
            "cascadeTerminateToConfigurations": []
        },

My package.json:

"dependencies": {
        "@unocss/reset": "^0.58.9",
        "element-plus": "^2.8.0",
        "lodash": "^4.17.21",
        "penpal": "^6.2.2",
        "pinia": "^2.2.1",
        "vue": "^3.4.37",
        "vue-i18n": "9.9.0",
        "vue-router": "^4.4.3"
    },
    "devDependencies": {
        "@antfu/eslint-config": "^3.6.2",
        "@chromatic-com/storybook": "^2.0.2",
        "@iconify/json": "^2.2.236",
        "@intlify/unplugin-vue-i18n": "^2.0.0",
        "@playwright/test": "^1.46.0",
        "@storybook/addon-actions": "^8.3.5",
        "@storybook/addon-designs": "^8.0.3",
        "@storybook/addon-docs": "^8.3.5",
        "@storybook/addon-essentials": "^8.3.5",
        "@storybook/addon-interactions": "^8.3.5",
        "@storybook/addon-links": "^8.3.5",
        "@storybook/addon-storysource": "^8.3.5",
        "@storybook/blocks": "^8.3.5",
        "@storybook/builder-vite": "^8.3.5",
        "@storybook/html": "^8.3.5",
        "@storybook/html-vite": "^8.3.5",
        "@storybook/manager-api": "^8.3.5",
        "@storybook/test": "^8.3.5",
        "@storybook/theming": "^8.3.5",
        "@storybook/vue3": "^8.3.5",
        "@storybook/vue3-vite": "^8.3.5",
        "@tsconfig/node18": "^18.2.4",
        "@types/express": "^4.17.21",
        "@types/glob": "^8.1.0",
        "@types/jsdom": "^21.1.7",
        "@types/node": "^20.14.15",
        "@types/rsync": "^0.4.36",
        "@types/xml2js": "^0.4.14",
        "@types/yargs": "^17.0.33",
        "@unocss/eslint-plugin": "^0.62.4",
        "@unocss/preset-icons": "^0.61.9",
        "@unocss/transformer-attributify-jsx": "^0.58.9",
        "@vitejs/plugin-vue": "^5.1.2",
        "@vitejs/plugin-vue-jsx": "^3.1.0",
        "@vitest/coverage-istanbul": "^2.0.5",
        "@vitest/ui": "^2.0.5",
        "@vue/test-utils": "^2.4.6",
        "@vue/tsconfig": "^0.5.1",
        "chokidar": "^3.6.0",
        "chrome-launcher": "^1.1.2",
        "chromium-edge-launcher": "^0.2.0",
        "colors": "^1.4.0",
        "eslint": "^9.10.0",
        "eslint-plugin-storybook": "^0.9.0",
        "express": "^4.19.2",
        "glob": "^10.4.5",
        "http-proxy-middleware": "^2.0.6",
        "jsdom": "^24.1.1",
        "node-cache": "^5.1.2",
        "node-fetch": "^3.3.2",
        "npm-run-all": "^4.1.5",
        "prettier": "^3.3.3",
        "puppeteer-core": "^21.11.0",
        "rsync": "^0.6.1",
        "sass": "^1.77.8",
        "slugify": "^1.6.6",
        "storybook": "^8.3.5",
        "ts-morph": "^22.0.0",
        "ts-node": "^10.9.2",
        "typescript": "~5.3.3",
        "unocss": "^0.58.9",
        "unplugin-auto-import": "^0.17.8",
        "unplugin-icons": "^0.19.2",
        "unplugin-vue-components": "^0.26.0",
        "vite": "^5.4.0",
        "vite-node": "^2.0.5",
        "vite-plugin-dts": "^4.2.3",
        "vite-plugin-dynamic-import": "^1.5.0",
        "vite-plugin-inspect": "^0.8.5",
        "vitest": "^2.0.5",
        "vue-i18n-extract": "^2.0.7",
        "vue-tsc": "^1.8.27",
        "xml2js": "^0.6.2",
        "yargs": "^17.7.2"
    }

Any ideas?

VS Code version: Code 1.95.0 (Universal) (912bb683695358a54ae0c670461738984cbb5b95, 2024-10-28T20:16:24.561Z) OS version: Darwin arm64 24.0.0 Modes:

System Info |Item|Value| |---|---| |CPUs|Apple M2 Pro (12 x 2400)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: enabled_on
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
video_decode: enabled
video_encode: enabled
webgl: enabled
webgl2: enabled
webgpu: enabled
webnn: disabled_off| |Load (avg)|3, 4, 4| |Memory (System)|16.00GB (0.27GB free)| |Process Argv|--crash-reporter-id ede84c26-24db-4f68-8382-3f5f3c22a955| |Screen Reader|no| |VM|0%|
Extensions (92) Extension|Author (truncated)|Version ---|---|--- better-comments|aar|3.0.2 vscode-nginx-conf|ahm|0.3.5 file-nesting|ant|1.1.2 goto-alias|ant|0.2.0 iconify|ant|0.9.5 slidev|ant|0.49.29 unocss|ant|0.63.6 shell-syntax|bma|1.0.5 mermaid-markdown-syntax-highlighting|bpr|1.6.7 catppuccin-vsc|Cat|3.15.2 npm-intellisense|chr|1.4.5 path-intellisense|chr|2.9.0 esbuild-problem-matchers|con|0.0.3 dart-code|Dar|3.98.1 vscode-markdownlint|Dav|0.56.0 vscode-eslint|dba|3.0.10 xml|Dot|2.5.1 gitlens|eam|15.6.2 vscode-html-css|ecm|2.0.10 EditorConfig|Edi|0.16.4 prettier-vscode|esb|11.0.0 figma-vscode-extension|fig|0.4.0 copilot|Git|1.243.0 copilot-chat|Git|0.23.2024102903 vscode-pull-request-github|Git|0.100.0 gitlab-workflow|Git|5.17.0 git-worktrees|Git|2.2.0 gc-excelviewer|Gra|4.2.62 vscode-graphql-syntax|Gra|1.3.6 vue-snippets|hol|1.0.4 vscode-htmlhint|HTM|1.0.5 ftp-simple|hum|0.7.6 svg|joc|1.5.4 commitlint|jos|2.6.0 i18n-ally|lok|2.12.0 MagicPython|mag|1.1.0 python-path|mge|0.0.14 git-graph|mhu|1.30.0 mis-core|Mic|1.0.0 vscode-lebab|mrm|2.6.0 vscode-scss|mrm|0.10.0 vscode-docker|ms-|1.29.3 vscode-edge-devtools|ms-|2.1.6 autopep8|ms-|2024.0.0 pylint|ms-|2024.0.0 python|ms-|2024.16.1 vscode-pylance|ms-|2024.10.1 jupyter-keymap|ms-|1.1.2 remote-containers|ms-|0.388.0 remote-ssh|ms-|0.115.0 remote-ssh-edit|ms-|0.87.0 remote-wsl|ms-|0.88.5 vscode-remote-extensionpack|ms-|0.26.0 remote-explorer|ms-|0.4.3 remote-server|ms-|1.5.2 vscode-speech|ms-|0.10.0 vscode-paste-image|mus|1.0.4 bun-vscode|ove|0.0.15 csv-to-table|php|1.4.0 material-icon-theme|PKi|5.12.0 webgl-glsl-editor|rac|1.3.8 vscode-rapidapi-client|Rap|1.10.2 vscode-services|rap|1.0.2 nginx-formatter|ray|0.0.13 java|red|1.35.1 vscode-sort-json|ric|1.20.0 vscode-redmine|roz|1.1.1 tab-stasher|san|0.0.6 code-spell-checker|str|3.0.1 code-spell-checker-slovak|str|1.1.2 sass-indented|syl|1.8.31 es6-string-html|Tob|2.16.0 pdf|tom|1.2.2 tiff-preview|uco|0.0.1 vscode-mdx|uni|1.8.11 errorlens|use|3.20.0 explorer|vit|1.6.3 vscode-conventional-commits|viv|1.26.0 vscode-boot-dev-pack|vmw|0.2.1 vscode-java-debug|vsc|0.58.0 vscode-java-dependency|vsc|0.24.0 vscode-java-pack|vsc|0.29.0 vscode-java-test|vsc|0.42.0 vscode-maven|vsc|0.44.0 vscode-icons|vsc|12.9.0 vim|vsc|1.28.1 volar|Vue|2.1.10 vscode-todo-highlight|way|1.0.5 vscode-nginx|wil|0.7.2 JavaScriptSnippets|xab|1.8.0 emmet-live|yse|1.0.0 markdown-all-in-one|yzh|3.6.2 (7 theme extensions excluded)
A/B Experiments ``` vsliv368:30146709 vspor879:30202332 vspor708:30202333 vspor363:30204092 vscod805:30301674 binariesv615:30325510 vsaa593cf:30376535 py29gd2263:31024239 c4g48928:30535728 azure-dev_surveyone:30548225 vscrp:30673768 a9j8j154:30646983 962ge761:30959799 pythongtdpath:30769146 pythonnoceb:30805159 asynctok:30898717 pythonmypyd1:30879173 h48ei257:31000450 pythontbext0:30879054 cppperfnew:31000557 dsvsc020:30976470 pythonait:31006305 dsvsc021:30996838 01bff139:31013167 dvdeprecation:31068756 dwnewjupytercf:31046870 impr_priority:31102340 nativerepl1:31139838 refactort:31108082 pythonrstrctxt:31112756 wkspc-onlycs-t:31132770 wkspc-ranged-t:31151552 cf971741:31144450 iacca1:31156133 notype1cf:31157160 5fd0e150:31155592 dwcopilot:31170013 ```
avenmore commented 1 month ago

Have the same issue. My work-around is to remove all breakpoints, run my application, then put breakpoints back and they work correctly. So it just seems can't launch when there is a breakpoint. Edit: sorry, or refresh page when have breakpoints, including hmr - should delete this comment but just wanted to say more than "me too". Gonna roll back until this is fixed as this is a real productivity killer.

reecewbourgeois commented 1 month ago

My solution differs slightly from @avenmore's. My browser hit the exact line pictured above and never loaded any source files. Turns out, I had an unbound breakpoint visible only in the "Breakpoints" section of the "Run and Debug" VS Code menu. Removing it fixed the issue.

I hope this helps.

connor4312 commented 1 month ago

https://github.com/microsoft/vscode/issues/232651#issuecomment-2450365808