[Bug]: Local server never updates with local changes & intermittently displays live theme

[rcasimmons]

Please confirm that you have:

• [X] 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.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

When starting a local development server using the command:

shopify theme dev -s store-handle --theme-editor-sync --live-reload full-page

...and viewing the page at localhost, the local machine version of the theme should be displayed and any changes made locally, should be viewed when a hot reload takes place.

Actual behavior

Either one of two issues happens (seems to have been happening for the past 3/4 CLI versions):

1. When the development server is started (with the command previous), sometimes the live theme will be displayed.

or

2. The theme displayed is correct, but when making changes locally, hot reload simply reloads the same state and fails to show any updated code/visuals and thus the domain-based preview link needs to be used (example.com/pages/about?preview_theme_id=1234567890) - localhost/127 never works.

Verbose output

DEBUG `-> 200 request_id: 45180b82-c70b-4795-8b99-1759ed8702d4-1713349026
DEBUG Proxying GET https://example-store-url.myshopify.com/products/white-tropical-family-swimsuits.js?_fd=0&pb=0
DEBUG `-> 200 request_id: 99c5251c-53ab-4d66-ae04-5571076996d5-1713349026
DEBUG Proxying GET https://example-store-url.myshopify.com/products/mom-me-black-cheetah-high-waisted-bikini-1.js?_fd=0&pb=0
DEBUG Proxying GET https://example-store-url.myshopify.com/products/blush-leopard-bikini-swimsuit.js?_fd=0&pb=0
DEBUG `-> 200 request_id: 184782fa-4bd7-462e-b564-fe13431b71d9-1713349026
DEBUG Proxying GET https://example-store-url.myshopify.com/products/mom-me-baseball-mom-mini-fringe-top.js?_fd=0&pb=0
DEBUG `-> 200 request_id: 93720ac7-2802-47b6-8f38-431be8a35d4b-1713349026
DEBUG Proxying GET https://example-store-url.myshopify.com/products/mom-me-rust-polka-dot-cheetah-bikini.js?_fd=0&pb=0
DEBUG `-> 200 request_id: b4ae2ca6-4b2d-4e72-ac45-a627bb7a79e0-1713349027
DEBUG Proxying GET https://example-store-url.myshopify.com/cart.js?_fd=0&pb=0
DEBUG `-> 200 request_id: 6411c44d-d4b5-4e9a-8156-5cf269f3bf00-1713349027
DEBUG Proxying GET https://example-store-url.myshopify.com/cart.json?_fd=0&pb=0
DEBUG `-> 200 request_id: 37232444-737b-4851-8d46-359422f08f7f-1713349027
DEBUG `-> 200 request_id: 08526dcf-90c6-4da1-a186-d3515ef349c1-1713349027
DEBUG `-> 200 request_id: 3fb6d70c-5bbc-41b7-889c-6502f0316b87-1713349027
DEBUG Proxying GET https://example-store-url.myshopify.com/cart.js?_fd=0&pb=0
DEBUG `-> 200 request_id: 9a31a100-9891-4455-9480-7db74e6b6cf8-1713349027
DEBUG `-> 200 request_id: c64d9af3-d1b4-48b6-8f0c-aabb0d04189e-1713349027
DEBUG `-> 200 request_id: 909b763a-1f84-4291-8a7b-8a9d0b6e0d36-1713349027
DEBUG Proxying GET https://example-store-url.myshopify.com/apps/loggedincustomer?_fd=0&pb=0
DEBUG Proxying GET https://example-store-url.myshopify.com/cart.js?_fd=0&pb=0
DEBUG `-> 200 request_id: cf3e0ba0-90f7-43e0-a8da-41381360bbe2-1713349027
DEBUG Proxying GET https://example-store-url.myshopify.com/cart.js?_fd=0&pb=0
DEBUG GET https://example-store-url.myshopify.com/admin/api/unstable/themes/127904415818/assets.json with request_id: 3667f175-16ec-4406-be2e-9a2a9ce58aa1-1713349027
DEBUG ignore package.json
DEBUG `-> 200 request_id: 7486e35c-969e-4599-984d-08b5e87bba16-1713349028
DEBUG Proxying GET https://example-store-url.myshopify.com/cart.js?_fd=0&pb=0
DEBUG `-> 200 request_id: f4b51b28-4893-4076-8e00-b8e2707b86ef-1713349028
DEBUG Proxying GET https://example-store-url.myshopify.com/cart.js?_fd=0&pb=0
DEBUG `-> 200 request_id: e0f7d4ef-c733-4554-9f3b-92341a335e6f-1713349028
DEBUG `-> 401 request_id: 98340977-91c4-4aff-871f-ca1455672ac3-1713349027
DEBUG GET https://example-store-url.myshopify.com/admin/api/unstable/themes/127904415818/assets.json with request_id: 81fd6dc3-8660-4713-9dee-c641fe363b0d-1713349031
DEBUG ignore package.json

Reproduction steps

1. Run shopify theme dev -s store-handle --theme-editor-sync --live-reload full-page
2. Make a local change
3. Browser will refresh
4. No change is shown until the shopify url is used.

Operating System

macOS 14.4.1 & Windows 10

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

3.59.0

Shell

zsh / Git Bash

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

v21.7.3

What language and version are you using in your application?

No response

[RCA-JC]

I have also experienced this issue.

[RyanBriggsDev]

This is also an issue for me, has been for around 4 weeks now. Any help much appreciated 🙏

[azeem-rainycity]

This happened with me few weeks ago and it was showing the live store preview on http://127.0.0.1:9292/ But I used http://127.0.0.1:9292?preview_theme_id=id-here then it worked fine

[aleksand88]

Same issue here. Crashed my head for a few days on that! THANK YOU @azeem-rainycity you are my HERO! preview_theme_id works.

[isaacroldan]

@Shopify/theme-code-tools ☝

[aleksand88]

@Shopify/theme-code-tools ☝

I don't think that will solve it completely because the issue isn't only for Themes. It is mostly in preview on http://127.0.0.1:9292/

[rcasimmons]

@Shopify/theme-code-tools ☝

Any chance of elaboration here @isaacroldan ?

Me and the team don't seem to have heard of that and the repo appears to be private?

[isaacroldan]

I'm just tagging someone to look at this internally.

[mgmanzella]

👋 hi @rcasimmons, thanks for reaching out! the behavior your experiencing in the CLI is because of this flag your passing in: --live-reload full-page

removing this will run theme dev with the default live-reload mode which is hot-reload. you should then see your local changes reflected in your preview. let us know if you're still having trouble after trying this 🙏

[rcasimmons]

👋 hi @rcasimmons, thanks for reaching out! the behavior your experiencing in the CLI is because of this flag your passing in: --live-reload full-page

removing this will run theme dev with the default live-reload mode which is hot-reload. you should then see your local changes reflected in your preview. let us know if you're still having trouble after trying this 🙏

Thanks @mgmanzella for the response but I think you've misunderstood here.

The issue lies with changes just not being made to 127 - not that the page is simply refreshing - we're fully aware the page is refreshing due to this flag.

This means, for example, if I were to edit a section that's present on the homepage by say, changing the CSS's background from black to white, the 127/localhost url wouldn't then display the background as white and stay as black.

If I wanted to view these changes, I would have to use the shop's url followed by a parameter of 'preview_theme_id' which we shouldn't have to do - live reload is there for a reason.

The other issue lying with the fact that sometimes the live theme is being shown on 127/localhost and not the local theme.

The refresh flag is intentional in our case as to mitigate JS which will only run on load or whereby if the page breaks due to JS.

[mgmanzella]

👋 what you're seeing is expected when using the --live-reload flag. the --live-reload flag actually changes how the development server behaves when a file change happens, we have:

• off - the server doesn’t anything
• full-page - the server refreshes the page
• hot-reload - the server hot reloads the page based on the changes

[rcasimmons]

👋 what you're seeing is expected when using the --live-reload flag. the --live-reload flag actually changes how the development server behaves when a file change happens, we have:

• off - the server doesn’t anything
• full-page - the server refreshes the page
• hot-reload - the server hot reloads the page based on the changes

Thanks @mgmanzella but I'm still unsure on this and I still think there's some confusion on this issue?

Full page reload is something we've used since the birth of CLI and the changes locally made have always shown on 127 - as suggested, we need to use this as some JS breaks with the standard hot reload.

How does this explain the issue where the page will show the live theme but restarting the CLI will show the correct theme?

In addition, I've checked with the team and even removing the full-page/--live-reload flag entirely still doesn't fix the issue.

The core issue, as suggested, is that if a change is made whilst the server is running in an IDE and hot reload kicks in, it will not show the new changes.

[mgmanzella]

understood, thank you for your patience we'll take a deeper look 🙏

[karreiro]

👋 Hey @rcasimmons,

Could you please confirm if the workaround provided by @azeem-rainycity resolves this issue for you?

This will be useful for us in identifying the root cause of the problem.

Additionally, I believe the reload issue arises when a CSS change doesn't appear in the browser. Could you please confirm if the CSS code resides in a .css file in the assets directory or somewhere else?

Thanks for reporting this!

[rcasimmons]

👋 Hey @rcasimmons,

Could you please confirm if the workaround provided by @azeem-rainycity resolves this issue for you?

This will be useful for us in identifying the root cause of the problem.

Additionally, I believe the reload issue arises when a CSS change doesn't appear in the browser. Could you please confirm if the CSS code resides in a .css file in the assets directory or somewhere else?

Thanks for reporting this!

Thanks @karreiro.

The example I gave with CSS was just an example sadly, to show my point - the issue at hand applies to all types of files.

As for the preview_theme_id parameter, this worked to fix the issue with the live theme showing but didn't seem to help the localhost changes.

[karreiro]

Thank you for reporting this issue and sharing those details/workarounds, @rcasimmons, @RCA-JC, @RyanBriggsDev, @azeem-rainycity, and @aleksand88!

The fix for this issue has been released in 3.59.1. Upgrading the CLI should resolve the problem:

Please let me know if you encounter any unexpected behavior.

[rcasimmons]

@karreiro

Appreciate the quick turnaround to deliver a fix, sadly it's still happening with the updated CLI.

In the screenshot below, the left demonstrates my 127 page and the right is previewing the theme directly with the shopify url - 127 is showing me the client's current, live theme and the right is showing what I should be seeing in my local theme:

Sadly, it also still seems we're experiencing the issue where changes aren't being reflected on 127 either - my colleague has recently upgraded his CLI to this version also.

In this example, there's a red banner below the Add to Cart but isn't showing locally:

Again, left is 127 and the right is directly previewing the local theme on the Shopify URL.

[rcasimmons]

@karreiro / @mgmanzella

I was just wondering if we had an update here as the issue is still outstanding.

[RyanBriggsDev]

Also still an issue for me - actually seems to be worse since the update

[RCA-JC]

I too am still experiencing this issue.

[karreiro]

Hey @rcasimmons,

We identified and fixed an issue in the development server session. The fix was released on Shopify CLI 3.60 (yesterday) so upgrading your local CLI should resolve the problem.

We've tried the new version of shopify theme dev specifically with one of your store themes, and it successfully worked.

We really don't think this will be necessary, but in case the scenario you reported happens again, could you please share the --verbose output at the moment you save the file. We will wait for your feedback before closing the issue.

Thanks again for reporting this!

--

Hey @RyanBriggsDev @RCA-JC,

Could you please confirm if you're using Shopify CLI 3.60?

If you still face this issue on 3.60, could you please share --verbose output from the startup of the server until the moment you save the file and the hot-reload mechanism doesn't work? Thanks a lot!

[rcasimmons]

Hey @rcasimmons,

We identified and fixed an issue in the development server session. The fix was released on Shopify CLI 3.60 (yesterday) so upgrading your local CLI should resolve the problem.

We've tried the new version of shopify theme dev specifically with one of your store themes, and it successfully worked.

We really don't think this will be necessary, but in case the scenario you reported happens again, could you please share the --verbose output at the moment you save the file. We will wait for your feedback before closing the issue.

Thanks again for reporting this!

--

Hey @RyanBriggsDev @RCA-JC,

Could you please confirm if you're using Shopify CLI 3.60?

If you still face this issue on 3.60, could you please share --verbose output from the startup of the server until the moment you save the file and the hot-reload mechanism doesn't work? Thanks a lot!

Hey @karreiro!

Appreciate you letting us know and this appears to have solved it but me and the team will continue to test.

Is there anyway to request that CLI checks for an update once it's started? We weren't aware that an update had been pushed you see.

[karreiro]

Hey @rcasimmons, glad to hear that :) that means this issue was really impacted by the session cookie fix we shipped in 3.60.

Is there anyway to request that CLI checks for an update once it's started?

I don't think there's any configuration to activate that for all commands, but the shopify version command checks if any updates are available:

I'm closing this issue for now, but please feel free to reopen it if the issue comes back :)