-
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. I was expecting "update" log lines instead, e.g. The I was able to get HMR working fully with in-place updates by updating the following:
At the top, add: import react from '@vitejs/plugin-react'; then at the bottom of the plugins: [react()] However, you'll then get an error about: To fix, you can either add the suggested fix from that comment to your: <script type="module" src="/@vite/client"></script> line. Or, to have Vite inject it for you in the Express middleware, update:
Add: "@vitejs/plugin-react": "1.2.0" to the
Add: import react from '@vitejs/plugin-react'; at the top, then add: plugins: [react()] to the exported
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... |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Looks like this has been added in commit: Shopify/shopify-frontend-template-react@d33d98d |
Beta Was this translation helpful? Give feedback.
Looks like this has been added in commit: Shopify/shopify-frontend-template-react@d33d98d