preset-vite icon indicating copy to clipboard operation
preset-vite copied to clipboard

HMR not working when using react -> @preact/compat override in package.json

Open bhallstein opened this issue 1 year ago • 2 comments

Edit: I initially thought it was a dynamic backend that was causing this issue, this turned out to be wrong. Skip to my next comment as what I wrote here turned out to be a red herring.

Our project uses a dynamic backend. I'm trying to switch it to use preact and @preact/preset-vite is looking like almost a drop-in replacement, which is fairly amazing.

However, HMR isn't working. On https://vitejs.dev/guide/backend-integration.html for HMR with react we have this:


<!-- if development -->
<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/main.js"></script>
...

Note if you are using React with @vitejs/plugin-react, you'll also need to add this before the above scripts, since the plugin is not able to modify the HTML you are serving:

html
<script type="module">
  import RefreshRuntime from 'http://localhost:5173/@react-refresh'
  RefreshRuntime.injectIntoGlobalHook(window)
  window.$RefreshReg$ = () => {}
  window.$RefreshSig$ = () => (type) => type
  window.__vite_plugin_react_preamble_installed__ = true
</script>

(When the above is included in our served HTML with this preset in use and react removed, it errors in the browser console, so I assume it is not to be included when using this preset, though I'm not entirely confident in that.)

This leads me to wonder if there is an equivalent piece of code that is missing from our dynamically served backend when using this preset?

bhallstein avatar Jun 05 '23 22:06 bhallstein