HMR with vite in lib mode with fallbacks to real site

[belzile]

Our app is built with a micro-frontend architecture. Our projects on vite do not have HMR yet. I am trying to add it with the vite-plugin-react.

Most of our micro frontends are vite bundled HTML Custom Elements running with React under the hood.

When developing locally, we serve our real site, but replace the assets related to our "micro component" with the vite dev server.

i.e.

server: {
      proxy: {
        ['^\\/(?!src|sandbox|dev|node_modules|package|@).*']: { // everything not handled by vite's dev server
          target: <my site URL>,
          changeOrigin: true,
          followRedirects: true,
          secure: false,
        },
      },
    },

When adding the vite-plugin-react with hmr enabled, I of course get a "Can't detect preamble" error. Documentation on vite's website is quite clear: I need to inject some code in my index.html to make it work. The problem I have is that I am not sure about how to do this since I have no control over the file.

With earlier versions of vite plugin react (3-), I built a plugin this way:

const preambleScript = `import RefreshRuntime from "/@react-refresh";
RefreshRuntime.injectIntoGlobalHook(window);
window.__vite_plugin_react_preamble_installed__ = true;
if (!window.$RefreshReg$) window.$RefreshReg$ = () => {};
if (!window.$RefreshSig$) window.$RefreshSig$ = () => type => type;
`;

// ... plugin config:
    configResolved(config) {
      skipFastRefresh = config.isProduction || config.command === 'build' || config.server.hmr === false;
    },
    transform(inputCode, _id, _options) {
      if (skipFastRefresh) return;

      const code = inputCode.replace('import RefreshRuntime from "/@react-refresh";', preambleScript);
      const ms = new MagicString(code);

      return {
        code: ms.toString(),
        map: maps ? ms.generateMap(maps) : undefined,
      };
    },

This no longer works properly with 4+.

Could somebody provide any tips on how I could get this to work?

[belzile]

Got it. Since version 5, you can add import '@vitejs/plugin-react/preamble'; to your lib entry point.

But I am still getting this issue: #958