Non-remix exports break Vite's HMR

[andrecasal]

Vite's HMR only works when a file exports a component and nothing else. Because Remix knows which exports belong to Remix (handle, links, loader, action, etc), it allows us to still export these things from within a route.

However, the root.tsx contains an export function ThemeSwitch(), which isn't a standard Remix export.

Won't this break HMR? According to Remix's HMR docs, it should.

After upgrading to Vite, I lost Live Reload/HMR/HDR. I'm not sure exports like these are the culprits, but wanted to ask before I go digging around. Manual refresh still works.

[andrecasal]

Just ran npx create-epic-app@latest and HMR is broken.

[vite] hmr invalidate /app/root.tsx Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports`

[kentcdodds]

However, the root.tsx contains an export function ThemeSwitch(), which isn't a standard Remix export.

This is not true:

epic-stack/app/root.tsx

Line 379 in c047d75

function ThemeSwitch({ userPreference }: { userPreference?: Theme | null }) {

🤔

That said, it does export useTheme and useOptimisticThemeMode. This could be reason enough to move these things out of root.tsx. Could you try that and let us know whether that fixes the issue?

[andrecasal]

I tried it like this and HMR still doesn't work.

[andrecasal]

Vite seems to be doing it's thing, but the browser doesn't reload. Only a manual reload would update its contents.

[kentcdodds]

Sounds like you need to open an issue on Remix then.

[andrecasal]

A barebones Remix installation has HMR working perfectly, so I imagine it has to do with the Epic Stack.

[kentcdodds]

Interesting. Does the Indie Stack have working HMR? I just realized the Indie Stack hasn't been updated to the latest Remix which is certainly a surprise. Does the express template work with HMR? I'm just wondering if it's an issue with a custom server: https://github.com/remix-run/remix/tree/main/templates/express

[thefrana]

@andrecasal have you resolved this issue? I also encountered it and the problem was in Express integration with Vite. I do not use Epic Stack directly so I am not sure if the problem is the same.