HMR not working

[n8sabes]

Live edits to styled components are not being rendered by HMR. You must to stop and restart dev mode between edits which is quite inefficient.

It has not worked for some time. I am using the main branch.

    "@builder.io/qwik": "github:builderio/qwik-build",
    "@builder.io/qwik-city": "github:builderio/qwik-city-build",

[wmertens]

I think there's nothing else I can do beyond what I did in 0.5.5-0, this seems to be a qwik issue, see https://github.com/BuilderIO/qwik/issues/1901

[franck-co]

Faced the same issue with version 0.5.12 But I don't have to restart the qwik dev server when I stick to version 0.5.4

[wmertens]

Weird, thanks for finding a working version.

Unfortunately I don't use this module myself any more so if anybody could help find the problem that'd be greatly appreciated.

[franck-co]

@wmertens In 5785cc85a3734ee0bce87c5b4070b2a4933b7e9c the handleHotUpdate hook was removed.

// Re-parse .css.ts files when they change
async handleHotUpdate({file, modules}) {
    if (!cssFileFilter.test(file)) return
    try {
        const virtuals: any[] = []
        const invalidate = (type: string) => {
            const found = server.moduleGraph.getModulesByFile(`${file}${type}`)
            found?.forEach(m => {
                virtuals.push(m)
                return server.moduleGraph.invalidateModule(m)
            })
        }
        invalidate(virtualExtCss)
        invalidate(virtualExtJs)
        // load new CSS
        await server.ssrLoadModule(file)
        return [...modules, ...virtuals]
    } catch (e) {
        // eslint-disable-next-line no-console
        console.error(e)
        throw e
    }
},

By adding it back, I get the expected behaviour. It's not technically HMR because it triggers a full page reload but at least, there is no need to restart the dev server each time.

My understanding is that the example.css.ts.vanilla.css needs to be invalidated too. It was done by the handleHotUpdate hook, among other things.

Because there was certainly a good reason to remove the handleHotUpdate hook., maybe it's better to reintroduce only the invalidation of .css files.

This could be done in the transform hook, where the .css.ts files are already invalidated :

const {moduleGraph} = server
const modules = Array.from(
    moduleGraph.getModulesByFile(absoluteIdNoExt) || []
)
+const virtualCSSModules = Array.from(
+   moduleGraph.getModulesByFile(
+       `${absoluteIdNoExt}${virtualExtCss}`
+   ) || []
+)
-for (const module of modules) {
+for (const module of [...modules, ...virtualCSSModules]) {
    if (module) {
        moduleGraph.invalidateModule(module)

        // Vite uses this timestamp to add `?t=` query string automatically for HMR.
        module.lastHMRTimestamp =
            (module as any).lastInvalidationTimestamp || Date.now()
    }
}

This way the page reloads without any handleHotUpdate

I've made a PR with thoses changes #26

[JaxCavalera]

Did the fix from that PR get released yet? it seems this is still an issue and happening on the latest available version 0.5.12