Shopify / cli

Build apps, themes, and hydrogen storefronts for Shopify
https://shopify.dev
MIT License
434 stars 128 forks source link

[Bug]: Hot reload not triggered for certain theme files #4534

Closed nikitaourazbaev closed 1 month ago

nikitaourazbaev commented 1 month ago

Please confirm that you have:

In which of these areas are you experiencing a problem?

Theme

Expected behavior

Changing a file should sync the file and trigger a hot reload in the browser

Actual behavior

The file gets synced but a hot reload does not get triggered

Verbose output

2024-09-26T14:01:08.203Z:
Running system process:
  · Command: npm prefix
  · Working directory: /path/to/theme/dir

2024-09-26T14:01:08.556Z: Obtaining the dependency manager in directory /path/to/theme/dir...
2024-09-26T14:01:08.821Z:
Running system process:
  · Command: ruby -v
  · Working directory: /path/to/theme/dir

2024-09-26T14:01:08.824Z: Request to https://theme-kit-access.shopifyapps.com/cli/admin/api/unstable/themes/128731349105/assets/bulk.json completed in 647 ms
With response headers:
 - cache-control: no-cache
 - content-type: application/json; charset=utf-8
 - server-timing: processing;dur=306, socket_queue;dur=5.863, cfRequestDuration;dur=368.999958
 - x-request-id: 404652dd-32bb-4fee-9e1d-da16107c64b1-1727359268

2024-09-26T14:01:08.824Z: File Upload Results:
-templates/search.json: success
2024-09-26T14:01:08.914Z: Request to https://theme-kit-access.shopifyapps.com/cli/admin/api/unstable/themes/128731349105/assets/bulk.json completed in 743 ms
With response headers:
 - cache-control: no-cache
 - content-type: application/json; charset=utf-8
 - server-timing: processing;dur=421, socket_queue;dur=7.395, cfRequestDuration;dur=594.999790
 - x-request-id: c4eaaac1-1512-418c-81ca-68ccc6b25801-1727359268

2024-09-26T14:01:08.914Z: File Upload Results:
-locales/pt-BR.json: success
-locales/pt-PT.json: success
-locales/da.json: success
2024-09-26T14:01:09.009Z: Request to https://monorail-edge.shopifysvc.com/v1/produce completed in 156 ms
With response headers:
 - x-request-id: 4f19715c-651d-41d3-a633-316566efaa8f

2024-09-26T14:01:09.012Z: Analytics event sent: {
  "command": "theme dev",
  "time_start": 1727359266068,
  "time_end": 1727359268198,
  "total_time": 2130,
  "success": true,
  "cli_version": "3.67.2",
  "ruby_version": "2.6.10",
  "node_version": "20.11.1",
  "is_employee": false,
  "uname": "darwin amd64",
  "env_ci": false,
  "env_plugin_installed_any_custom": false,
  "env_plugin_installed_shopify": "[\"@shopify/cli\"]",
  "env_shell": "fish",
  "env_device_id": "45ac8e8547bf908f5d1325fcaa6aedbb15a7a228",
  "env_cloud": "localhost",
  "env_package_manager": "yarn",
  "env_is_global": true,
  "cmd_app_warning_api_key_deprecation_displayed": false,
  "cmd_all_timing_network_ms": 1896,
  "cmd_all_timing_prompts_ms": 0,
  "cmd_all_launcher": "unknown",
  "cmd_all_topic": "theme",
  "cmd_all_plugin": "@shopify/theme",
  "cmd_all_force": false,
  "cmd_all_verbose": true,
  "cmd_all_path_override": true,
  "cmd_all_path_override_hash": "7b29505f8d9e1cab721d6a3fd8fa024055af932c",
  "cmd_all_timing_active_ms": 233,
  "cmd_all_exit": "ok",
  "args": "--environment=feat1 --verbose",
  "cmd_all_environment_flags": "{\"password\":\"*****\",\"theme\":\"128731349105\",\"store\":\"my-dev-store\",\"ignore\":[\"templates/index.json\"]}",
  "env_plugin_installed_all": "[\"@shopify/cli\"]",
  "metadata": "{\"extraPublic\":{},\"extraSensitive\":{}}"
}
2024-09-26T14:01:09.012Z: Completed command theme dev
2024-09-26T14:01:09.026Z: Request to https://theme-kit-access.shopifyapps.com/cli/admin/api/unstable/themes/128731349105/assets/bulk.json completed in 856 ms
With response headers:
 - cache-control: no-cache
 - content-type: application/json; charset=utf-8
 - server-timing: processing;dur=530, socket_queue;dur=4.65, cfRequestDuration;dur=792.000055
 - x-request-id: 042617e5-46b8-4a2e-9b42-62e8dc6fb042-1727359268

2024-09-26T14:01:09.028Z: File Upload Results:
-locales/de.json: success
-locales/es.json: success
-locales/fr.json: success
-locales/nl.json: success
-locales/en.default.json: success
2024-09-26T14:01:09.256Z: Request to https://theme-kit-access.shopifyapps.com/cli/admin/api/unstable/themes/128731349105/assets/bulk.json completed in 1082 ms
With response headers:
 - cache-control: no-cache
 - content-type: application/json; charset=utf-8
 - server-timing: processing;dur=893, socket_queue;dur=7.323, cfRequestDuration;dur=958.999872
 - x-request-id: eb26a6d5-886e-448c-b53b-30f2c3334a01-1727359268

2024-09-26T14:01:09.260Z: File Upload Results:
-templates/404.json: success
-templates/article.json: success
-templates/blog.json: success
-templates/cart.json: success
-templates/page.contact.json: success
-templates/list-collections.json: success
-templates/collection.json: success
-templates/password.json: success
-templates/product.json: success
-templates/page.json: success
2024-09-26T14:01:09.269Z: Ignoring theme file config/settings_schema.json via .shopifyignore...
2024-09-26T14:01:09.302Z: Ignoring theme file templates/index.json via --ignore...
2024-09-26T14:01:09.303Z: Files to be deleted:

GET /
2024-09-26T14:01:10.726Z: → Rendering https://theme-kit-access.shopifyapps.com/cli/sfr/?_fd=0&pb=0 (with )...
2024-09-26T14:01:11.212Z: Request to https://theme-kit-access.shopifyapps.com/cli/sfr/?_fd=0&pb=0 completed in 485 ms
With response headers:
 - cache-control: max-age=0, private, must-revalidate
 - content-type: application/json; charset=utf-8
 - etag: W/"e85e94237ed788b7ea14d7f704819cbb"
 - server-timing: processing;dur=315, socket_queue;dur=7.705, cfRequestDuration;dur=381.000042
 - x-request-id: 2b125ed0-c70f-4a9c-9e8d-6e38275b3744-1727359270

2024-09-26T14:01:11.213Z: ← 200 (request_id: 2b125ed0-c70f-4a9c-9e8d-6e38275b3744-1727359270)
2024-09-26T14:01:17.463Z: Reading the content of file at sections/my-section.liquid...
2024-09-26T14:01:18.352Z: Request to https://theme-kit-access.shopifyapps.com/cli/admin/api/unstable/themes/128731349105/assets/bulk.json completed in 878 ms
With response headers:
 - cache-control: no-cache
 - content-type: application/json; charset=utf-8
 - server-timing: processing;dur=478, socket_queue;dur=7.054, cfRequestDuration;dur=558.999777
 - x-request-id: 94c20d70-82c7-4431-b116-99a0baee49d9-1727359277

• 10:01:18 Synced » update sections/my-section.liquid

Reproduction steps

  1. Clone latest Dawn repo
  2. Add a new file in sections/ called rich-text-2.liquid (the name does not seem to matter)
  3. Paste this into the file: https://gist.github.com/nikitaourazbaev/8c8d6d20ce4fb990c145ffc3005c3289
  4. Make changes to the file
  5. Hot reload will not be triggered for this file, while it will be triggered for other files

Operating System

macOS Sonoma 14.7

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

3.67.2

Shell

Warp, fish

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

v20.11.1

What language and version are you using in your application?

Liquid

jamesmengo commented 1 month ago

👋🏻 Hey @nikitaourazbaev!

Are you rendering this section anywhere already? I tried replicating this locally and hot-reload is working after adding it to my index.json in sections, and in order

Here is the value I'm using:

Details ```liquid { "sections": { "rich-text-2": { "type": "rich-text-2" }, "image_banner": { "type": "image-banner", "blocks": { "heading": { "type": "heading", "settings": { "heading": "Image banner", "heading_size": "h0" } }, "text": { "type": "text", "settings": { "text": "Give customers details about the banner image(s) or content on the template.", "text_style": "body" } }, "button": { "type": "buttons", "settings": { "button_label_1": "Shop all", "button_link_1": "shopify://collections/all", "button_style_secondary_1": true, "button_label_2": "", "button_link_2": "", "button_style_secondary_2": false } } }, "block_order": [ "heading", "text", "button" ], "settings": { "image_overlay_opacity": 40, "image_height": "large", "desktop_content_position": "bottom-center", "show_text_box": false, "desktop_content_alignment": "center", "color_scheme": "scheme-3", "mobile_content_alignment": "center", "stack_images_on_mobile": false, "show_text_below": false } }, "rich_text": { "type": "rich-text", "blocks": { "heading": { "type": "heading", "settings": { "heading": "Talk about your brand", "heading_size": "h1" } }, "text": { "type": "text", "settings": { "text": "

Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.<\/p>" } } }, "block_order": [ "heading", "text" ], "settings": { "color_scheme": "scheme-1", "full_width": true, "padding_top": 40, "padding_bottom": 0 } }, "featured_collection": { "type": "featured-collection", "settings": { "title": "Featured products", "heading_size": "h2", "collection": "all", "products_to_show": 8, "columns_desktop": 4, "color_scheme": "scheme-1", "show_view_all": false, "swipe_on_mobile": false, "image_ratio": "adapt", "show_secondary_image": true, "show_vendor": false, "show_rating": false, "columns_mobile": "2", "padding_top": 28, "padding_bottom": 36 } }, "collage": { "type": "collage", "blocks": { "collection-0": { "type": "collection", "settings": { "collection": "" } }, "product": { "type": "product", "settings": { "product": "", "second_image": false } }, "collection-1": { "type": "collection", "settings": { "collection": "" } } }, "block_order": [ "collection-0", "product", "collection-1" ], "settings": { "heading": "Multimedia collage", "heading_size": "h2", "desktop_layout": "left", "mobile_layout": "collage", "color_scheme": "scheme-1", "padding_top": 36, "padding_bottom": 36 } }, "video": { "type": "video", "settings": { "heading": "", "video_url": "https://www.youtube.com/watch?v=_9VUPq3SxOc", "heading_size": "h1", "description": "", "full_width": false, "color_scheme": "scheme-1", "padding_top": 36, "padding_bottom": 36 } }, "multicolumn": { "type": "multicolumn", "blocks": { "column1": { "type": "column", "settings": { "title": "Column", "text": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", "link_label": "", "link": "" } }, "column2": { "type": "column", "settings": { "title": "Column", "text": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", "link_label": "", "link": "" } }, "column3": { "type": "column", "settings": { "title": "Column", "text": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", "link_label": "", "link": "" } } }, "block_order": [ "column1", "column2", "column3" ], "settings": { "title": "", "heading_size": "h1", "image_width": "third", "image_ratio": "adapt", "columns_desktop": 3, "column_alignment": "center", "background_style": "none", "button_label": "", "button_link": "", "swipe_on_mobile": false, "color_scheme": "scheme-1", "columns_mobile": "1", "padding_top": 36, "padding_bottom": 36 } } }, "order": [ "rich-text-2", "image_banner", "rich_text", "featured_collection", "collage", "video", "multicolumn" ] } ```

nikitaourazbaev commented 1 month ago

Hi @jamesmengo, yes, I’m rendering it:

index.json ```json { "sections": { "rich_text_2_DY3XVH": { "type": "rich-text-2", "settings": { "title": "Rich text", "rich_text": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

" } }, "image_banner": { "type": "image-banner", "blocks": { "heading": { "type": "heading", "settings": { "heading": "Image banner", "heading_size": "h0" } }, "text": { "type": "text", "settings": { "text": "Give customers details about the banner image(s) or content on the template.", "text_style": "body" } }, "button": { "type": "buttons", "settings": { "button_label_1": "Shop all", "button_link_1": "shopify://collections/all", "button_style_secondary_1": true, "button_label_2": "", "button_link_2": "", "button_style_secondary_2": false } } }, "block_order": [ "heading", "text", "button" ], "settings": { "image_overlay_opacity": 40, "image_height": "large", "desktop_content_position": "bottom-center", "show_text_box": false, "desktop_content_alignment": "center", "color_scheme": "scheme-3", "image_behavior": "none", "mobile_content_alignment": "center", "stack_images_on_mobile": false, "show_text_below": false } }, "rich_text": { "type": "rich-text", "blocks": { "heading": { "type": "heading", "settings": { "heading": "Talk about your brand", "heading_size": "h1" } }, "text": { "type": "text", "settings": { "text": "

Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.

" } } }, "block_order": [ "heading", "text" ], "settings": { "desktop_content_position": "center", "content_alignment": "center", "color_scheme": "scheme-1", "full_width": true, "padding_top": 40, "padding_bottom": 0 } }, "featured_collection": { "type": "featured-collection", "settings": { "title": "Featured products", "heading_size": "h2", "description": "", "show_description": false, "description_style": "body", "collection": "all", "products_to_show": 8, "columns_desktop": 4, "full_width": false, "show_view_all": false, "view_all_style": "solid", "enable_desktop_slider": false, "color_scheme": "scheme-1", "image_ratio": "adapt", "image_shape": "default", "show_secondary_image": true, "show_vendor": false, "show_rating": false, "quick_add": "none", "columns_mobile": "2", "swipe_on_mobile": false, "padding_top": 28, "padding_bottom": 36 } }, "collage": { "type": "collage", "blocks": { "collection-0": { "type": "collection", "settings": { "collection": "" } }, "product": { "type": "product", "settings": { "product": "", "second_image": false } }, "collection-1": { "type": "collection", "settings": { "collection": "" } } }, "block_order": [ "collection-0", "product", "collection-1" ], "settings": { "heading": "Multimedia collage", "heading_size": "h2", "desktop_layout": "left", "mobile_layout": "collage", "card_styles": "product-card-wrapper", "color_scheme": "scheme-1", "padding_top": 36, "padding_bottom": 36 } }, "video": { "type": "video", "settings": { "heading": "", "heading_size": "h1", "enable_video_looping": false, "video_url": "https://www.youtube.com/watch?v=_9VUPq3SxOc", "description": "", "full_width": false, "color_scheme": "scheme-1", "padding_top": 36, "padding_bottom": 36 } }, "multicolumn": { "type": "multicolumn", "blocks": { "column1": { "type": "column", "settings": { "title": "Column", "text": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

", "link_label": "", "link": "" } }, "column2": { "type": "column", "settings": { "title": "Column", "text": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

", "link_label": "", "link": "" } }, "column3": { "type": "column", "settings": { "title": "Column", "text": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

", "link_label": "", "link": "" } } }, "block_order": [ "column1", "column2", "column3" ], "settings": { "title": "", "heading_size": "h1", "image_width": "third", "image_ratio": "adapt", "columns_desktop": 3, "column_alignment": "center", "background_style": "none", "button_label": "", "button_link": "", "color_scheme": "scheme-1", "columns_mobile": "1", "swipe_on_mobile": false, "padding_top": 36, "padding_bottom": 36 } } }, "order": [ "rich_text_2_DY3XVH", "image_banner", "rich_text", "featured_collection", "collage", "video", "multicolumn" ] } ```

Is there anything else I can do to narrow down the cause on my end?

jamesmengo commented 1 month ago

🤔 Could you maybe take a video if possible showing the replication flow, and test this with a different browser?

nikitaourazbaev commented 1 month ago

@jamesmengo sure, here’s a video:

https://share.cleanshot.com/bdsDPv96

The linked PR sounds promising, is there a reason some sections might be added to the hash and others not?