HMR is not working

[zhuhaow]

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

[FDiskas]

There are two possible cases when it happens.

1. If Vite or a plugin does not handle HMR, a full reload will happen.
2. 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

[jweb89]

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

[r100-stack]

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?

[jweb89]

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

[jweb89]

@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

[r100-stack]

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

[sud977]

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.

[r100-stack]

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?

[wmertens]

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() {