callstack
HMR is broken when used with Vite middelware and ssrLoadModule
Environment
Vite 4.3.8 @linaria/vite 4.2.11 @vitejs/plugin-react 4.0.0 @linaria/core 4.2.10 @linaria/react 4.3.8 node 18.14.1 macOS
Description
When running Vite in middleware mode with Express as the web server, calling ssrLoadModule in the request handler seems to break hot module reloading for Linaria.
- Step 1) Start server with
npm run dev - Step 2) Open the server in the browser and reload the page one time. This triggers ssrLoadModule to be run again.
- Step 3) Save Home.jsx without any changes to trigger HMR.
- Step 4) This should cause HMR to remove the Linaria CSS for some reason. Editing the Linaria css code to change the styles adds the CSS back.
It seems when the page is reloaded and the request handler calls ssrLoadModule on the server for a second time it causes the HMR issue to happen. If the page is never loaded more than the initial load, and the request handler/ssrLoadModule is only ever called one time, then HMR works as expected. Moving the ssrLoadModule call outside of the request handler also fixes the issue.
It does not affect CSS modules or other css file imports... only Linaria css macro use.
Reproducible Demo
I've created a demo repo
npm run dev to run the server with the issue.
node server2.js to run Vite server without express middelware mode to demonstrate the issue does not exist. Additionally running vite via npx vite avoids the issue as well.
On server.js line 67 I show that the issue is fixed if moving ssrLoadModule outside of the request handler. On server.js line 79 I explain where the problem code is.
