Vite: css hmr is not supported in runtime mode.

[predaytor]

Not to say it's a plugin issue, but when using the css ?url imports, after updating the styles, the browser window refreshes, losing its previous state, e.g. HMR is not working properly.

I can't reproduce it with the given remix example, everything works perfectly here except I removed the now deprecated <LiveReload /> and solved the hmr issue in dev mode when using the style preload:

export const links: LinksFunction = () => [ 
  ...(!import.meta.env.DEV ? [{ rel: 'preload', href: stylesHref, as: 'style' }] : []),
  // ...
]

It's most likely not related to vite-stylex-plugin-dev, which is hard to reproduce at the moment, as I'm using a custom vite dev server with the Hono Framework for Remix, but I'm curious what you think could be causing this? Didn't find much info on it.

On every style update (not regular jsx mods) this comes out:

9:15:31 PM [vite] hmr update /app/root.tsx
9:15:31 PM [vite] hmr update /app/styles/index.css?direct
[vite] css hmr is not supported in runtime mode.

This line comes from packages/vite/src/runtime/hmrHandler.ts:

export async function handleHMRPayload(runtime: ViteRuntime, payload: HMRPayload): Promise<void> {
    const hmrClient = runtime.hmrClient;
    if (!hmrClient || runtime.isDestroyed()) return;

    switch (payload.type) {
        // ...

        case 'update':
            await hmrClient.notifyListeners('vite:beforeUpdate', payload);
            await Promise.all(
                payload.updates.map(async (update): Promise<void> => {
                    if (update.type === 'js-update') {
                        // runtime always caches modules by their full path without /@id/ prefix
                        update.acceptedPath = unwrapId(update.acceptedPath);
                        update.path = unwrapId(update.path);
                        return hmrClient.queueUpdate(update);
                    }

                    hmrClient.logger.error('[vite] css hmr is not supported in runtime mode.');
                }),
            );
            await hmrClient.notifyListeners('vite:afterUpdate', payload);
            break;
    }
}

[nonzzz]

Okay, I will take a look at evening

[nonzzz]

After my test, This may be related to vite hmr boundary, I'm not sure if it's plugin bug or vite's internal logic cause it.

[predaytor]

thanks for the investigation. It's not a big problem, it happens in my prod app with a custom vite-dev-server setup, I think it has something to do with it, in the normal repo example it's fine.

[predaytor]

I've tested this more and although the log message [vite] css hmr is not supported in runtime appears, it doesn't seem to have a direct effect on the hmr revalidation, everything works as expected, as with the regular Remix setup in our example. It has something to do with the nested routes, maybe because of some exports that I haven't been able to reproduce yet. As soon as I manage to find the problem I will let you know, thx.

[nonzzz]

If you find it, I'm glad to resolve it.

[predaytor]

Can confirm that everything is working properly with the latest version (0.7.2). Because of the way Remix handles HMR and HRD (hot data revalidation), there should be no additional exports other than Remix ones (meta, loader, default component etc.) from route files (eg /admin/route.tsx or /admin.tsx). There are some bugs (such as this log error) with custom vite server, but they are not related to this plugin. Thank you for your help!

export const meta: MetaFunction = () => {
  return [];
};

export default function Index() {
  // ...
}

export const styles = create({
  // ...
});

should be:

export const meta: MetaFunction = () => {
  return [];
};

export default function Index() {
  // ...
}

const styles = create({
  // ...
});

[predaytor]

Can confirm after the latest release, not sure if it's related to this plugin or Hono but this log line is gone as well as the SSR mismatch. 🖤