[Bug]: assets/theme.css.liquid and assets/theme.js.liquid files not hot reloading

[francisfernandez]

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

Changes done in the theme.css.liquid should sync and reflect in the front end.

Actual behavior

Any changes in the theme.css.liquid are not synced. Shopiy CLI shows an update has been made for assets/theme.css.liquid, but they do not show up in the front end.

Changes can be seen in the file when looking directly at the admin file.

My current workaround is to create a new .css file (without the .liquid format) to apply styling.

Reproduction steps

1. Make changes to theme.css.liquid
2. Inspect front-end to see style not updated

Operating System

Mac OS Monterey 12.6.3

Shopify CLI version (check your project's package.json if you're not sure)

3.48.1

Shell

zsh

Node version (run node -v if you're not sure)

20.5.0

What language and version are you using in your application?

Liquid, CSS

[gonzaloriestra]

@Shopify/theme-code-tools could you please have a look?

[gonzaloriestra]

Probably related to #2613

[MHabashy10]

Hey Guys, we noticed this issue since last week and we investigated it further. here are what we have found, which could help to debug this issue further.

Findings

Asset file (ex. theme.css.liquid)

1. Is uploaded to the theme files (when you click edit code in the browser)
2. The new file is fetched fine when you check the theme in the customizer ( link https://.myshopify.com/services/assets//editor_asset/theme.css )
3. However the old file is still get fetched when you Preview the theme (which is hosted via this link https:///cdn/shop/t//assets/theme.css?v= ) the random number should be each time you upload a new asset! that didn't happen causing this issue.!

What we did and didn't work

1. Clearing caching doesn't work.
2. Appending extra random query param to the asset file.
3. Changing file's name to ex. theme2.css.liquid, the new file had the same above senario, in the preview it isn't even seen/uploaded and the whole theme's css is down of course.

Workaround

It turnout to be if the file has .liquid extension it won't work!! but if you only use .css it will work just fine. so if you don't use liquid in that file, then as a workaround try using normal css extension not liquid. OR use the customizer for now to check your changes.

Hope this helps, till the root issue got fixed.

[rdkulp]

Having the same issue since Friday. I found that if I save the swatches.css.liquid file with a change (I add a period after the closing bracket and save, and then when I make my next change to preview in the browser I delete it and save) it updates to the most recent styles. Not ideal, but allows me to still work locally.

[jthk116]

I have the same issue except mine is with a .js.liquid file. It was working fine when it was just .js file but after switching to .js.liquid the changes are not reflecting, although they will appear to correct at some later time 10 minutes or an hour later.

[mashkovtsevlx]

+1 Here.
.js.liquid file is not getting updated

[charles-marsh-eastsideco]

+1

[corylynch]

+1 - just started happening this week for me.

[edselhans]

+1 I just noticed this issue yesterday.

For context, I'm using a vintage theme (OS 1.0) with themekit, but it's the same .liquid extension issue. In my case it's a .css.liquid file containing all my CSS, minified with some Liquid variables, that's compiled from a bunch of SCSS files. I can see the updates to the file in Admin > Online Store > Theme > Edit code, but the file that is being served on the frontend is the outdated version.

Things that haven't caused the /assets/*.liquid file to update on the frontend:

• Unlike others, the file that gets served on the frontend seems to remain the outdated version, regardless of how long I wait. I pushed an update yesterday afternoon, and checked back this morning and it was still the outdated version.
• Using a watcher (i.e. theme watch) vs manually pushing the changes (i.e. theme deploy) makes no difference

Things that have caused the /assets/*.liquid file to update on the frontend:

• Making updates to another file in /assets, like adding a new line to an unrelated .js file, causes the updated version of the .css.liquid file to start getting served on the frontend. To be clear, I'll have the watcher running, update my .css.liquid file, see that it's processed and updated by themekit, confirm the change is present in Admin > Online Store > Theme > Edit code, but not present in the .css file that being served to the frontend. Then I'll add a new line to a random .js file in /assets, reload the preview, and the .css file on the frontend will now be the updated version.
• I made a copy of an older, outdated theme, then pushed the new .css.liquid file, and saw the change reflected immediately on the frontend. I experimented a little and noticed if the change to .css.liquid was small, like just a few lines of CSS, the updated file wouldn't be served on the frontend. However, if the change was larger, like many lines of CSS, the file on the frontend would be updated immediately.

I hope this helps.

[karreiro]

👋 Hello everyone,

Yesterday, we applied a platform-level solution for this issue. As a result, it should now be resolved without any need for updates on your local tooling.

Please, let me know if you're still facing this problem, so we can promptly reopen the issue.

[gabrielvincent]

I'm not sure if this is related to the bug reports in this thread, but I'm facing a similar issue with the theme. I've opened an issue here: #2697

[illarionvk]

We still experience the issue on multiple projects.

[gonzaloriestra]

More ocurrences: #2613 (comment)

[Letwah]

I am having the same issue now.

[RossDG96]

I am experiencing this same issue. Very frustrating as my changes were showing, then out of the blue they stopped showing.
It's showing that files are updating in the cli:

However, the only way I've been able to get changes to show is to quit shopify cli and start it again or, to push changes to my published theme via git.

[Letwah]

SAME! i thought i was going crazy.

[afleischer]

Hello, I am not sure how related this is, but in the context of theme app extension file syncing, es6-imported files (located within the same assets/ folder as other app extension files) are not consistently updated either, especially when running the "shopify dev" command, despite the CLI acknowledging the update and claiming such files were indeed "pushed to a draft". The deploy command doesn't seem to have as much of an issue with this but I would think the expected behavior would be that such files would update regardless of the command used.

[goranhorvathr]

We are currently experiencing a persistent issue where the .liquid files located in the assets folder are not being updated as expected. This is particularly concerning since our workflow relies on injecting general liquid variables for various design elements such as colors. Despite receiving confirmation from the Command Line Interface (CLI) indicating that the file has been updated, a manual inspection reveals that the CSS changes are not reflected in the file. This is confirmed by simply removing .liquid and everything starts to work well everything that does not have a liquid variable. Something is wrong with the parser on Shopify side.

Additionally, we are facing significant challenges with the Hot Reload feature. Upon modifying a single file, our custom Vite configuration processes the SCSS and Tailwind classes, directing the output to the assets folder. Although the CLI acknowledges the update and uploads the single modified file, it triggers an excessive number of refreshes—approximately a dozen for a single file update. This behavior is highly irregular and disrupts our development process. We are absolutely sure we are not syncing multiple files and it only happens with CSS and JS files. For some reason liquid files are ok. But even if we were uploading multiple files Hot Reload should wait for all the files to be uploaded before firing.

It is crucial that we address these issues promptly to maintain efficiency and ensure the integrity of our project's development workflow.

[adrienpicard]

This is happening to me now as well and seems completely random. CLI is up to date v3.56 and it was working fine earlier in the day.

Files are listed as Synced in the console but nothing changes when I reload the page locally.

[Tianyao-Ma]

+1 here. We've noticed since two days ago that the changes made in the .liquid files are not reflecting on the first preview link or the local port. We're only able to preview the changes under the third preview link.

We've attempted to update all related packages to the latest versions ( SHO CLI, node, and ruby) and have restarted both VS Code and the computer, but the issue persists.

[joshdavenport]

Also happens when editing directly in the Edit Code area of the Shopify admin.

[github-actions]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

[jmsquatch]

We're still experiencing this issue.

The activity is low because the community has seen no motivation to resolve this issue. This is your personal brand's fault, not the community.

[lukeh-shopify]

👋🏻 Hi all, this issue is on our radar and is being prioritized. As mentioned in this comment, using the third preview link is a workaround to ensure changes are previewed correctly. Thanks for your patience 🙏🏻

[github-actions]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

[Tigatok]

Hi there,

Any progress on this issue?

[mvlad-reb]

I am also seeing a similar issue, I added a css and js file to assets that i'm working on, and made them load in the theme.liquid file, however every few refreshes or so the preview will load an empty file instead (I checked in the sources tab of inspector), requiring me to stop the theme dev and then restart it. This is a very frustrating experience, would really like it to be fixed

[jamesmengo]

Hey everybody!

Could you please try on 3.68 and report back? We've shipped some updates to the theme dev command since 3.67, including how local assets are served.

I want to validate that I'm trying all the correct steps for reproduction, as I've tried a couple of different versions and my efforts have not been fruitful.

If you are still experiencing this issue, please fill out the Issue template provided below and attach it as a comment in this thread.
Along with that, any visuals such as videos or screen captures

Thanks!

cc: @mvlad-reb @Tigatok @jmsquatch @francisfernandez

Issue Template

Reproduction steps

Verbose output (Execute command with the --verbose flag)

Operating System

Shopify CLI version (check your project's package.json if you're not sure)

Shell

Node version (run node -v if you're not sure)

What language and version are you using in your application?

[mvlad-reb]

Definitely still happening, but it seems to be specifically with some CSS files that weren't part of the original theme I'm working on. Not sure if that's a relevant fact.

[jamesmengo]

@mvlad-reb That helps! Thanks for the info :)

[mvlad-reb]

I am still getting this issue with the latest Shopify CLI package (3.79.0) with CSS files being loaded empty while in theme dev mode.

[frandiox]

@mvlad-reb Hi 👋

Our test process was:

1. Reference a missing xyz.css.liquid file from the theme
2. Add that file anew in assets/xyz.css.liquid
3. Have the browser automatically refresh to recognize the new file (which was already referenced)

Modifying xyz.css.liquid afterwards should also trigger a hot reload.

If this is not what you are experiencing, can you provide some steps to reproduce it? Or can you record a quick video to show it?
Thank you!

[mvlad-reb]

This is a CSS file I've added to the assets folder and then referenced it in the theme.liquid file in the

[frandiox]

@mvlad-reb I think there was a problem when you submited your previous message, it doesn't contain links or CSS content even when I check the source.

---

Edit: Oh, maybe I misunderstood and you actually didn't add a CSS file to your message, just mentioning about a local file you have and are referencing it in the <head> of your theme.liquid file?

[mvlad-reb]

Yes that's correct, sorry, I meant that as in "this is happening with a CSS file", yes.

[jamesmengo]

@mvlad-reb

We haven't been able to reproduce this, so we may need some more information

Can you please open a bug report with verbose logs? You can tag me in that issue.

Thanks!