qwik
qwik copied to clipboard
QwikDev
HMR is not working
Qwik Version
0.12.0
Operating System (or Browser)
macOS
Node Version (if applicable)
No response
Which component is affected?
Qwik Rollup / Vite plugin
Expected Behaviour
Create a website with pnpm create qwik@latest, run pnpm dev, open a page, change the source code, and expect the page to be updated with HMR.
Actual Behaviour
The page refreshed.
I checked the ws message, it always got a full reload.
Additional Information
No response
There are two possible cases when it happens.
- If Vite or a plugin does not handle HMR, a full reload will happen.
- Also if there is a dependency loop, a full reload will happen. To solve this, try removing the loop.
https://vitejs.dev/guide/troubleshooting.html#a-full-reload-happens-instead-of-hmr:~:text=A%20full%20reload%20happens%20instead%20of%20HMR
Just leaving a comment here that this is something I really think needs to be prioritized. It's a very poor developer experience when working on something that requires state in the page and it does a complete refresh when the code is changed
Just leaving a comment here that this is something I really think needs to be prioritized. It's a very poor developer experience when working on something that requires state in the page and it does a complete refresh when the code is changed
Losing the state is especially hurtful for us since we make network calls when the page loads. So just adding/removing a small tailwind class triggers a complete refresh that ultimately eats up our API usage quota.
So just wondering, is there any update on this?
@manucorporat Sorry for the ping but I still think this should be a priority. It is probably the single biggest thing as far as DX that would be holding qwik back from bigger adoption especially for more complex sites such as companies who are interested in qwik.
@manucorporat This is not completed. It's still doing a full reload and state is not persevered. https://stackblitz.com/edit/qwik-starter-ev2u7i?file=src%2Froutes%2Findex.tsx If you save the file it loses the count
@manucorporat This is not completed. It's still doing a full reload and state is not persevered. stackblitz.com/edit/qwik-starter-ev2u7i?file=src%2Froutes%2Findex.tsx If you save the file it loses the count
After updating the qwik version in the sandbox to 0.20.1 (the latest release), it still reloads instead of HMR. ☹️
I think this should be reopened.
Drawing on our prior experience transitioning to Next.js, we recognize the importance of optimizing DX and productivity, even if it did not meet our performance expectations. My team wants to migrate all our marketing pages to Qwik, but we are having a hard time deciding because of the absence of HMR support. This is particularly problematic since we have some features that require elaborate state management. I think adding HMR in Qwik would be a crucial enhancement to the framework.
There is a lot of confusion about whether HMR works for Qwik or not. Some repo contributors say it does, while others say they can't get it working. I asked/followed this on Discord, GitHub discussion, and this issue, but still am not clear whether HMR works. Because HMR doesn't even work on a brand new Qwik project.
Can you please clarify if I am doing something wrong? Or does HMR just not work for Qwik?
FWIW I added the example code from Vite to routes/index.tsx and then it will start saying hmr update instead of page reload when the file changes.
export const count = 1
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
if (newModule) {
// newModule is undefined when SyntaxError happened
console.log('updated: count is now ', newModule.count)
}
})
}
However, this doesn't do anything in the browser.
When you set debug: true in qwikVite in the vite plugins file, you can see that the handeHotUpdate hook gets called, but it has no effect.
[QWIK PLUGIN: 839] handleHotUpdate() {
If anyone would like to make a PR, I am happy to guide them through the process...
I wish I knew more about the underlying workings of qwik or HMR to be able to help fix or provide a PR. In the absence of that I would just like to say I'd very much appreciate this functioning (though for me, it wont have significant bearing on whether we adopt qwik or not)
I think the missing piece is getting it to rerender parts that have a changed module. I suppose that's harder to do because not all rendered HTML has code on the client, so in that case it needs to do SSR.
So maybe this is what's needed:
- inject something browser-side that listens to vite HMR (I think that's already in there)
- be able to replace already-loaded code (probably through a registry that wraps all loaded code)
- re-render when the code is replaced, keeping state the same
On top of that, sometimes a change will require SSR because the changed code only runs on the server.
https://vitejs.dev/blog/announcing-vite5-1.html
On top of that, sometimes a change will require SSR because the changed code only runs on the server.
Our prayers were heard and in vite 5.1 there is now support for HMR w/ SSR.
