search

barrel / shopify-vite

Modern frontend tooling for Shopify theme development using Vite for a best-in-class DX.
https://shopify-vite.barrelny.com/
MIT License
287 stars 45 forks source link

HMR not working as expected #108

Closed stijns96 closed 1 year ago

stijns96 commented 1 year ago

Hi there,

Whenever I save a file, Vite will reload the page. This breaks the HMR of Shopify. HMR does work, but Vite reloads the whole page after this has been done. After the reload it falls back to the state before saving the file.

Shopify CLI only reloads the full page if you save a JS file. I can imagine that we have to reload the page, since the frontend files are hosted on another IP. But this is not really a workable solution...

https://github.com/barrel/shopify-vite/assets/47820758/7200ca5d-0997-4b10-a37f-f60df51bb6f0

montalvomiguelo commented 1 year ago

@stijns96 Did you try serving your theme with the --live-reload full-page flag? https://shopify.dev/docs/themes/tools/cli/commands#dev-flags

stijns96 commented 1 year ago

Hi @montalvomiguelo,

That is somehow working a bit better, but still Vite will reload the full page.

2 things here.

  1. I also tried to add the flag --live-reload off to completely disable Shopify's HRM. This will give the same bug. Isn't that weird?
  2. With the flag you provided, the whole HRM will, of course, not work.

I actually want the HRM (without page reload), while my styles are updating as well. Isn't that possible?

montalvomiguelo commented 1 year ago

@stijns96 The Shopify CLI hot reloads changes to sections and css files. You would want to change that behavior to full-page --live-reload full-page so that your Tailwind styles apply correctly.

https://github.com/barrel/shopify-vite/assets/5134470/0cfd3522-8556-473b-91f3-fe7e792bda28

Tailwind+Vite will trigger a page reload after you change liquid files; that's expected.

Please check the Tailwind setup in this project https://github.com/montalvomiguelo/hydrogen-theme (: