vite-plugin-react Breakpoint on initial render not being called on rerender

Describe the bug

Hi!

While trying Vite on a React Project and debugging it I found that if you add a breakpoint (on the browser inspector) on a useEffect with an empty array of dependencies it won't be triggered when you force a Hot Reload, but the code is being executed. For example, if you add a console log in the useEffect you will see the Log in the console when you trigger a reload but the breakpoint is not called.

I leave an example on stackblitz.

Thanks!

Reproduction

https://stackblitz.com/edit/vitejs-vite-mlud4j

Steps to reproduce

Just put a breakpoint on the console log inside the useEffect and modify the content of the string to force a hot reload.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^4.0.0 => 4.0.0 
    vite: ^4.3.9 => 4.3.9

Used Package Manager

npm

Logs

No response

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.
[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.

Jun 13 '23 11:06 JorgeRey-Lenio

The issue is that after fast refresh, the file is different from the point of view of the browser because of the querystring.

I need to investigate but this might be tricky to fix given how Vite HMR works currently.

@bmeurer maybe you have a different view on this?

Jun 13 '23 11:06 ArnaudBarre

Somewhat related https://github.com/vitejs/vite/issues/13503#issuecomment-1589256355

Jun 13 '23 12:06 patak-dev

I suspect that this is a different problem than https://github.com/vitejs/vite/issues/13503. I think what we're seeing here is that the migration of the breakpoint is racing with the execution of the useEffect closure.

cc @jaro-sevcik @natorion

Jun 14 '23 08:06 bmeurer

Does bumping the timeout here helps?

Jun 14 '23 08:06 ArnaudBarre

I just checked with Firefox 102.11.0esr (64-bit), which also misses the breakpoint.

Bumping the timeout will likely make this more likely to work, but it'd still be flakily missing the breakpoint, since it's still racy.

Jun 14 '23 08:06 bmeurer

One workaround that will always work: Put a debugger statement there instead of a breakpoint.

Jun 14 '23 08:06 bmeurer

I'm closing this issue to cleanup because there is not a lot that can be done here and a fix will need to come from a better operability between the debuggers and Vite core. @sapphi-red already merged some PR in that direction: https://github.com/vitejs/vite/pull/13514

May 20 '24 11:05 ArnaudBarre