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

Breakpoint on initial render not being called on rerender #179

Closed
7 tasks done
JorgeRey-Lenio opened this issue Jun 13, 2023 · 7 comments
Closed
7 tasks done

Breakpoint on initial render not being called on rerender #179

JorgeRey-Lenio opened this issue Jun 13, 2023 · 7 comments

Comments

@JorgeRey-Lenio
Copy link

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

@ArnaudBarre
Copy link
Member

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?

@patak-dev
Copy link
Member

Somewhat related vitejs/vite#13503 (comment)

@bmeurer
Copy link

bmeurer commented Jun 14, 2023

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

image

cc @jaro-sevcik @natorion

@ArnaudBarre
Copy link
Member

Does bumping the timeout here helps?

@bmeurer
Copy link

bmeurer commented Jun 14, 2023

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.

@bmeurer
Copy link

bmeurer commented Jun 14, 2023

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

@ArnaudBarre
Copy link
Member

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: vitejs/vite#13514

@ArnaudBarre ArnaudBarre closed this as not planned Won't fix, can't repro, duplicate, stale May 20, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Jun 5, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants