Breakpoints in Vite React

dwpprof commented 1 week ago

Describe the bug

I decided to try Vite for myself. I use VSCode and Google Chrome, trying use it with React Typescript project, studied a lot of information, tried several approaches, but still did not understand why breakpoints do not work when the browser is launched in debug mode. If you set a breakpoint anywhere before launching F5, the page in the browser just hangs in debug pause mode and does not pass the breakpoint to VSCode, but if you set a breakpoint after the page loads, the breakpoints work, as I expect. I tried to create a JS project, a Vue project, the same behavior everywhere. I found several similar topics in the search, but none of the solutions helped me. I used before default react-script project. I am realy sorry, if the problem is simple and i'm just stupid

Reproduction

n/a

Steps to reproduce

I created new clean project from TypeScript React template npm create vite@latest my-vite-react-app -- --template react-ts

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13600KF
    Memory: 8.09 GB / 31.83 GB
  Binaries:
    Node: 20.5.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-react: ^4.3.3 => 4.3.3
    vite: ^4.5.5 => 4.5.5

Used Package Manager

npm

Logs

n/a

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

matt-wormley commented 1 week ago

I'm reproducing this on a project where I've been using vite for a couple months now. Even older versions of my code including older versions of vite all fail. I also can reproduce this issue with vite + react + typescript starter app.

I reproduced on mac + chrome and mac + edge as well.

matt-wormley commented 1 week ago

Reproduced with vanilla JavaScript vite-project as well.

matt-wormley commented 1 week ago

Ah - I just tracked it down. It's an issue with the October 2024 build of VSCode. Reverting back to September build https://code.visualstudio.com/updates/v1_94

matt-wormley commented 1 week ago

https://github.com/microsoft/vscode/issues/232702

avenmore commented 1 week ago

Seems 232651 is the main issue tracking this problem.

dwpprof commented 1 week ago

Ах, я только что отследил это. Это проблема с октябрьской сборкой VSCode 2024 года. Откат к сентябрьской сборке https://code.visualstudio.com/updates/v1_94

Yes, it seems to be a problem with the microsoft debugger. Thanks for the tip, I'll try downgrading VScode

adelaiglesia commented 1 week ago

Reproduced on vite + vue3 two years project which this happens from one day to another. When was the VSCode update?

vitejs / vite