@prefresh/vite HMR working erratically

Vite version: 2.1.0 @prefresh/vite version: 2.1.0

Ok, so I’m having a very strange issue here. My project(50+ TS/X files)'s HMR seemed to work well before I did something like this:

import { PlaceholderApp } from '__/components/apps/Placeholder/Placeholder';
import { createAppConfig } from '__/helpers/create-app-config';

export const viewSourceAppConfig = createAppConfig({
  title: `View Source`,
  resizable: true,
  Component: () => <PlaceholderApp />,

  shouldOpenWindow: false,
  externalAction: () => window.open('https://github.com/puruvj/macos-web', '_blank'),
});

Notice Component property here Now, this config is loaded in another object, and from there, its pulled into a component, like this:

export const Window = ({ appID }: WindowProps) => {
  const { Component, resizable } = appsConfig[appID];

  return (<Component />);
}

After I added this, the HMR is just gone. On most changes, the whole page reloads This is on editing anything, not just this PlaceholderApp or Window component, anything! And this is quite variable. The change seems to happen randomly. Sometimes, there will be HMR, and sometimes it reloads. It seems to alternate between those two

I think it might be because Vite can’t statically analyze the components, but it affecting HMR for whole app in this erratic fashion is just painful.

One of the config files: https://github1s.com/puruvj/macos-web/blob/HEAD/src/data/apps/view-source.app-config.tsx The object where all these configs go: https://github1s.com/puruvj/macos-web/blob/HEAD/src/data/apps/apps-config.ts The component where this Component is extracted and used: https://github1s.com/puruvj/macos-web/blob/HEAD/src/components/Desktop/Window/Window.tsx

[JoviDeCroock]

I wonder if this is an issue with how this update is being bubbled, as this might not be a self-accepting file it will bubble up to a non-boundary.

I can check if this is an issue with Prefresh but I’m not entirely sure if this is a good pattern to HMR from, will report back when I get the time to look into it.

[PuruVJ]

Alright, I’ve tracked the issue down completely, and its impossibly weird. I don’t understand why it is happening.

Any external component inside Window.tsx is causing the HMR to break. I switched PlaceholderApp with other apps too, but same result. Modifying them cause alternate page reloads. This is the relevant Window.tsx: https://github1s.com/PuruVJ/macos-web/blob/feat/fix-hmr-remove-component-prop-from-app-configs/src/components/Desktop/Window/Window.tsx

And this is where the Window is called: https://github1s.com/PuruVJ/macos-web/blob/feat/fix-hmr-remove-component-prop-from-app-configs/src/components/Desktop/WindowsArea/WindowsArea.tsx

Got any idea what might be going wrong?