[Bug]: No HMR when working with extensions

[kinngh]

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?

Extension

Expected behavior

Any changes to the code for extensions should trigger a re-render and update the extension

Actual behavior

Despite making changes to the code, the extension is never updated and requires a rerun of shopify app dev to see any changes.

My understanding is the CLI isn't watching for changes and rebuilding because the verbose logs are very clear that HMR is working as expected, except for Theme Extensions that's causing these issues.

Video: https://www.youtube.com/watch?v=EApN72a-Ddo

Verbose output

Verbose output

2025-01-05T23:04:52.342Z: Request to https://partners.shopify.com/api/cli/graphql completed in 703 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=225, socket_queue;dur=2.36, util;dur=0.7, cfRequestDuration;dur=528.999805
- x-request-id: e435b1d7-4039-4e09-8cc1-4a68a590925b-1736118291
  
04:34:52 │                extensions │ 2025-01-05T23:04:52.637Z: Received websocket message with event type dispatch and data:
04:34:52 │                extensions │ {
04:34:52 │                extensions │   "type": "unfocus"
04:34:52 │                extensions │ }
04:34:52 │                extensions │
04:34:52 │                extensions │ 2025-01-05T23:04:52.649Z: Sending websocket with event type dispatch and data:
04:34:52 │                extensions │ {
04:34:52 │                extensions │   "type": "unfocus",
04:34:52 │                extensions │   "extensions": [],
04:34:52 │                extensions │   "store": "open-source-wishlist-app-store.myshopify.com",
04:34:52 │                extensions │   "app": {
04:34:52 │                extensions │     "title": "extensions",
04:34:52 │                extensions │     "apiKey": "98b8e563728992bfe23258659c813708",
04:34:52 │                extensions │     "url": "https://open-source-wishlist-app-store.myshopify.com/admin/oauth/redirect_from_cli?client_id=98b8e563728992bfe23258659c813708",
04:34:52 │                extensions │     "mobileUrl": "https://open-source-wishlist-app-store.myshopify.com/admin/apps/98b8e563728992bfe23258659c813708?shop=open-source-wishlist-app-store.myshopify
.com&host=b3Blbi1zb3VyY2Utd2lzaGxpc3QtYXBwLXN0b3JlLm15c2hvcGlmeS5jb20vYWRtaW4vYXBwcy85OGI4ZTU2MzcyODk5MmJmZTIzMjU4NjU5YzgxMzcwOA"
04:34:52 │                extensions │   }
04:34:52 │                extensions │ }
04:34:52 │                extensions │
2025-01-05T23:04:56.636Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:04:57.490Z: Request to https://partners.shopify.com/api/cli/graphql completed in 853 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=279, socket_queue;dur=2.547, util;dur=0.4, cfRequestDuration;dur=635.999918
- x-request-id: 869591d7-9284-4a91-a354-ad249a89c54d-1736118296
  
2025-01-05T23:05:01.639Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:02.327Z: Request to https://partners.shopify.com/api/cli/graphql completed in 685 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=286, socket_queue;dur=5.028, util;dur=0.6, cfRequestDuration;dur=561.000109
- x-request-id: b8ab3e67-1a4b-4497-a7ea-c9afc825210c-1736118301
  
2025-01-05T23:05:06.640Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:07.233Z: Request to https://partners.shopify.com/api/cli/graphql completed in 587 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=242, socket_queue;dur=1.595, util;dur=0.6, cfRequestDuration;dur=459.000111
- x-request-id: ca813775-63c8-4002-948e-d97151738ad0-1736118306
  
2025-01-05T23:05:11.642Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:12.326Z: Request to https://partners.shopify.com/api/cli/graphql completed in 683 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=281, socket_queue;dur=2.212, util;dur=0.4, cfRequestDuration;dur=556.999922
- x-request-id: be13eaa9-bb38-45ab-a99e-4125ace66261-1736118311
  
2025-01-05T23:05:16.644Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:17.441Z: Request to https://partners.shopify.com/api/cli/graphql completed in 796 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=263, socket_queue;dur=7.126, util;dur=0.1, cfRequestDuration;dur=576.999903
- x-request-id: 8b54507c-376e-40bf-a408-f9df2b347971-1736118316
  
2025-01-05T23:05:21.645Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:22.231Z: Request to https://partners.shopify.com/api/cli/graphql completed in 585 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=237, socket_queue;dur=2.186, util;dur=1.3, cfRequestDuration;dur=456.999779
- x-request-id: bbc2e63f-d4b7-4a9b-8329-c476b5b18ceb-1736118321
  
2025-01-05T23:05:26.646Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:27.329Z: Request to https://partners.shopify.com/api/cli/graphql completed in 682 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=220, socket_queue;dur=2.013, util;dur=0.2, cfRequestDuration;dur=489.000082
- x-request-id: 3195bd64-aecd-4a54-88a6-3107dbe585fb-1736118326
  
2025-01-05T23:05:31.647Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:32.408Z: Request to https://partners.shopify.com/api/cli/graphql completed in 760 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=307, socket_queue;dur=6.918, util;dur=0.5, cfRequestDuration;dur=632.999897
- x-request-id: b8263a74-8307-4e3a-9889-aae4891f5cff-1736118331
  
2025-01-05T23:05:36.646Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:37.279Z: Request to https://partners.shopify.com/api/cli/graphql completed in 632 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=235, socket_queue;dur=3.552, util;dur=0.3, cfRequestDuration;dur=504.999876
- x-request-id: 19f9c17a-62be-4fb9-8113-aabb13d75835-1736118336
  
2025-01-05T23:05:41.649Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:42.309Z: Request to https://partners.shopify.com/api/cli/graphql completed in 660 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=254, socket_queue;dur=7.102, util;dur=0.2, cfRequestDuration;dur=531.000137
- x-request-id: 76eebcd8-38f1-4939-a378-1a901451bf2c-1736118341
  
2025-01-05T23:05:46.649Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:47.365Z: Request to https://partners.shopify.com/api/cli/graphql completed in 715 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=304, socket_queue;dur=1.84, util;dur=0.2, cfRequestDuration;dur=589.999914
- x-request-id: 2241a18d-2994-4f27-874d-bfa371fad601-1736118346
  
2025-01-05T23:05:51.651Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:52.387Z: Request to https://partners.shopify.com/api/cli/graphql completed in 735 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=276, socket_queue;dur=4.49, util;dur=0.1, cfRequestDuration;dur=553.999901
- x-request-id: 9d28bef9-0081-4460-ae66-d289c596d8d4-1736118351
  
2025-01-05T23:05:56.652Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:05:57.324Z: Request to https://partners.shopify.com/api/cli/graphql completed in 671 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=259, socket_queue;dur=1.376, util;dur=0.5, cfRequestDuration;dur=534.999847
- x-request-id: c21d4055-9936-4fee-890d-697fde975f49-1736118356
  
2025-01-05T23:06:01.649Z: Sending "Partners" GraphQL request:
query FindAppPreviewMode($apiKey: String!) {
  app(apiKey: $apiKey) {
    developmentStorePreviewEnabled
  }
}

With variables:
{
"apiKey": "*****"
}

With request headers:
- User-Agent: Shopify CLI; v=3.71.5
- Keep-Alive: timeout=30
- Sec-CH-UA-PLATFORM: darwin
- Content-Type: application/json

to https://partners.shopify.com/api/cli/graphql
2025-01-05T23:06:02.302Z: Request to https://partners.shopify.com/api/cli/graphql completed in 652 ms
With response headers:
- cache-control: max-age=0, private, must-revalidate
- content-type: application/json; charset=utf-8
- etag: W/"f9e834f7231872722829cb9dec035749"
- server-timing: processing;dur=263, socket_queue;dur=1.87, util;dur=0.4, cfRequestDuration;dur=533.999920
- x-request-id: f1abd93e-904d-4723-aa98-036cb060e3a5-1736118361

Reproduction steps

1. Create a Checkout UI Extension
2. Start dev server
3. Make a change

Video: https://www.youtube.com/watch?v=EApN72a-Ddo

Operating System

macOS 15.2

Shopify CLI version (shopify --version)

@shopify/cli/3.72.2 darwin-arm64 node-v23.5.0

Shell

zsh

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

23.5 (tested with 18.x LTS too)

What language and version are you using in your application?

Node 23.5 / JavaScript

[kinngh]

Digging into this further - I had to remove extension_directories from my shopify.app.toml and restructure project to use extensions/ directory and follow the Remix app structure to get HMR working again. At first I thought my TOML is broken but if it really was broken, I wouldn't be able to generate and deploy extensions at all^

[isaacroldan]

Hey @kinngh, thanks for the report, can you please let me know the value of extension_directories in your app.toml? I found a possible bug there and want to confirm.

[kinngh]

So here's how I work with this - I have 3 shopify.app.toml files across my project.

1. Root
2. app/
3. extension/

In all cases, the value of extension_directories is scoped to where the extensions actually are.

1. Root: ./extension/extensions/*
2. app/: ../extension/extensions/*
3. extension/: ./extensions/*

A fix I found was to move the extensions/ to root level and remove all instances of extension_directories entry from my TOML and run all shopify commands at a root level.

Please let me know if there's any more information you need or if this wasn't clear enough

[isaacroldan]

That's all I needed :)

The bug is in the wildcards for the extension_directories value. Using a single * works for detecting the extensions, but the file watcher interprets that as a "watch for changes in that folder, but not recursively in subfolders". The file watcher expects a double asterisk ** to watch for changes in all subfolders.

So changing to:

• Root: ./extension/extensions/**
• app/: ../extension/extensions/**
• extension/: ./extensions/**

Should work as a workaround while we fix this issue.

[kinngh]

Can confirm this now works as expected - thank you so much!