Is full React HMR update in-place functionality missing from the node template?

[edlaver]

Not sure if it's meant to be like this or if it's just my setup, but when using the default node template with the new CLI (v3), I don't get in-place updates for any changes to my React components. Instead the page does a full reload after each change instead. Is this as expected?

In the frontend logs, I get "page reload" log lines from Vite, e.g. [vite] page reload /pages/index.jsx

I was expecting "update" log lines instead, e.g. [vite] hmr update /pages/index.jsx and for the changes to happen in-place.

The @vitejs/plugin-react plugin appears to be in the package.json file already, but doesn't appear to be imported and used anywhere by default?

---

I was able to get HMR working fully with in-place updates by updating the following:

./web/frontend/vite.config.js

At the top, add:

import react from '@vitejs/plugin-react';

then at the bottom of the defineConfig function, add:

plugins: [react()]

However, you'll then get an error about: vite-plugin-react can't detect preamble. Something is wrong.
See: vitejs/vite#1984 (comment) for more details.

To fix, you can either add the suggested fix from that comment to your: ./web/index.html file, just after the:

<script type="module" src="/@vite/client"></script>

line.

Or, to have Vite inject it for you in the Express middleware, update:

./web/package.json

Add:

"@vitejs/plugin-react": "1.2.0"

to the dependencies.

./web/vite.config.js

Add:

import react from '@vitejs/plugin-react';

at the top, then add:

plugins: [react()]

to the exported config object.

./web/index.js

Add:

import { createServer as createViteServer } from 'vite';
const viteServer = await createViteServer({
  server: { middlewareMode: 'ssr' }
})

after the

import { BillingInterval } from "./helpers/ensure-billing.js";

line.

Then, replace:

      res
        .status(200)
        .set("Content-Type", "text/html")
        .send(fs.readFileSync(fallbackFile));

with:

      try {
        let html = fs.readFileSync(fallbackFile, 'utf-8')
    
        // Transform HTML using Vite plugins to add React preamble
        html = await viteServer.transformIndexHtml(req.url, html)
    
        res
        .status(200)
        .set("Content-Type", "text/html")
        .send(html);

      } catch (e) {
        return next(e)
      }

---

Happy to create a PR if you think it'd be useful to have included in the default template?

Seems a shame to have HMR without utilizing it to the full extent...

[edlaver]

Looks like this has been added in commit: Shopify/shopify-frontend-template-react@d33d98d