[Bug]: Theme ID mismatch – Live theme ID returned instead of development theme

GLips commented 2 weeks ago

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

Shopify CLI should not crash, and always get connected to the theme ID specified by the environment in the shopify.theme.toml file.

Actual behavior

CLI quits on start or page load and returns this error:

╭─ error ────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│  Theme ID mismatch: expected 140504694981 but got 139501109445.                            │
│  Request ID: 3ebd1daa-ccfa-4b6e-a6fa-c1eb4d081a9c-1728575669                               │
│  URL: https://MY-STORE.myshopify.com/                                                      │
│                                                                                            │
│                                                                                            │
│  This is likely related to an issue in upstream Shopify APIs.                              │
│  Please try again in a few minutes and report this issue:                                  │
│  https://github.com/Shopify/cli/issues/new?template=bug-report.yml                         │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯

Verbose output

2024-10-10T16:07:14.373Z: Analytics event sent: {
  "command": "theme dev",
  "time_start": 1728576424479,
  "time_end": 1728576433729,
  "total_time": 9250,
  "success": true,
  "cli_version": "3.68.1",
  "ruby_version": "3.3.5",
  "node_version": "22.9.0",
  "is_employee": false,
  "uname": "darwin arm64",
  "env_ci": false,
  "env_plugin_installed_any_custom": false,
  "env_plugin_installed_shopify": "[\"@shopify/cli\"]",
  "env_shell": "zsh",
  "env_device_id": "ba91c82e48d5b2b1e0888eb9bc166e9c62cb811c",
  "env_cloud": "localhost",
  "env_package_manager": "pnpm",
  "env_is_global": true,
  "env_auth_method": "device_auth",
  "cmd_app_warning_api_key_deprecation_displayed": false,
  "cmd_all_timing_network_ms": 3553,
  "cmd_all_timing_prompts_ms": 4892,
  "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": "44e2c1bcb547053d064f5d49f3f7abeb51082d5f",
  "cmd_all_timing_active_ms": 803,
  "cmd_all_exit": "ok",
  "user_id": "395cbaa2-2a4e-44a1-a44e-ea0b73b42f08",
  "args": "-e dev --verbose",
  "cmd_all_environment_flags": "{\"store\":\"MY-STORE\",\"theme\":\"140504694981\",\"theme-editor-sync\":true}",
  "env_plugin_installed_all": "[\"@shopify/cli\"]",
  "metadata": "{\"extraPublic\":{},\"extraSensitive\":{}}"
}
2024-10-10T16:07:14.375Z: Completed command theme dev
GET /
2024-10-10T16:07:14.562Z: → Rendering https://MY-STORE.myshopify.com/?_fd=0&pb=0 (with )...
2024-10-10T16:07:14.939Z: Request to https://MY-STORE.myshopify.com/?_fd=0&pb=0 completed in 376 ms
With response headers:
 - content-type: text/html; charset=utf-8
 - etag: "cacheable:380f927c268eee6a27457ff9d8bdf259"
 - server-timing: processing;dur=224;desc="gc:15", db;dur=72, db_async;dur=28.855, edge_cart;dur=1.4;desc="trips=1", parse;dur=7, render;dur=76, asn;desc="22773", edge;desc="LAX", country;desc="US", theme;desc="139501109445", pageType;desc="index", servedBy;desc="b5pp", requestID;desc="228406a0-5797-4047-ba1d-3b8756fc2e9c-1728576434", cfRequestDuration;dur=346.999884, ipv6
 - x-request-id: 228406a0-5797-4047-ba1d-3b8756fc2e9c-1728576434

2024-10-10T16:07:14.939Z: ← 200 (request_id: 228406a0-5797-4047-ba1d-3b8756fc2e9c-1728576434)
╭─ error ────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│  Theme ID mismatch: expected 140504694981 but got 139501109445.                            │
│  Request ID: 228406a0-5797-4047-ba1d-3b8756fc2e9c-1728576434                               │
│  URL: https://MY-STORE.myshopify.com/?_fd=0&pb=0                                           │
│                                                                                            │
│  This is likely related to an issue in upstream Shopify APIs.                              │
│  Please try again in a few minutes and report this issue:                                  │
│  https://github.com/Shopify/cli/issues/new?template=bug-report.yml                         │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯

Reproduction steps

Start shopify theme dev -e [ENV_NAME] using the shopify.theme.toml file to specify store name and theme ID
Error sometimes occurs immediately, otherwise after a page refresh seemingly randomly
Restart Shopify CLI and repeat ☝️

Operating System

Mac OS Sonoma 14.5

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

3.68.1

Shell

zsh

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

v20.17.0

What language and version are you using in your application?

No response

MaxDesignFR commented 2 weeks ago

I have had this one too also a couple of times. Seems to be random as well.

enricofranke commented 1 week ago

i have the same Issue

colinhowells commented 1 week ago

Being bitten by this as well, only in my case I wasn't setting the theme ID explicitly but allowing the cli to create a development theme ID for me. It seems like in that case on certain routes the cli decides that the dev theme id doesn't match the active theme's, and then the cli crashes.

Explicitly setting the ID as that of the active theme (either using a toml or the --theme flag) works, but that creates other issues I'd rather not deal with.

Not sure how this problem began, I've not changed anything in my local dev process. That said, other people in the org aren't running into this, so maybe it's something I'm doing.

colinhowells commented 1 week ago

Just tested using shopify theme dev --legacy and did not have these issues. So that's a workaround for people – the --legacy flag.

Back to the v3 problem:

Here's the verbose log – note the theme changing value when navigating to /account (not sure what values are sensitive, so redacting).

I'm wondering if this has to do with cached routes being served while running theme dev, as the index route is served uncached, whereas the /account route seems to be coming from cache with the wrong theme ID in the Server-Timing header:

GET /
2024-10-18T21:41:26.468Z: → Rendering https://$REDACTED.myshopify.com/?_fd=0&pb=0 (with )...
2024-10-18T21:41:27.039Z: Request to https://$REDACTED.myshopify.com/?_fd=0&pb=0 completed in 571 ms
With response headers:
 - cache-control: no-cache, no-store
 - content-type: text/html; charset=utf-8
 - server-timing: processing;dur=385;desc="gc:27", db;dur=124, db_async;dur=6.315, edge_cart;dur=1.5;desc="trips=1", parse;dur=16, render;dur=156, asn;desc="7922", edge;desc="SEA", country;desc="US", theme;desc="$DEV_THEME_ID", pageType;desc="index", servedBy;desc="6n6b", requestID;desc="df7f3bc7-ed43-4121-a2e3-fcbba6721193-1729287686", cfRequestDuration;dur=496.000051
 - x-request-id: df7f3bc7-ed43-4121-a2e3-fcbba6721193-1729287686

2024-10-18T21:41:27.039Z: ← 200 (request_id: df7f3bc7-ed43-4121-a2e3-fcbba6721193-1729287686)
GET /account
2024-10-18T21:41:35.095Z: → Rendering https://$REDACTED.myshopify.com/account?_fd=0&pb=0 (with )...
2024-10-18T21:41:35.894Z: Request to https://$REDACTED.myshopify.com/account?_fd=0&pb=0 completed in 799 ms
With response headers:
 - content-type: text/html; charset=utf-8
 - etag: "cacheable:69b0181007e3b709b9d3a8ffe227ec38"
 - server-timing: processing;dur=243;desc="gc:57", db;dur=36, db_async;dur=7.496, parse;dur=10, render;dur=73, asn;desc="7922", edge;desc="SEA", country;desc="US", theme;desc="$ACTIVE_THEME_ID", pageType;desc="customers/login", servedBy;desc="2spz", requestID;desc="72dcd59e-5fa8-45f1-a669-9ff1d9bb6c84-1729287695", cfRequestDuration;dur=349.999905
 - x-request-id: 72dcd59e-5fa8-45f1-a669-9ff1d9bb6c84-1729287695

2024-10-18T21:41:35.895Z: ← 200 (request_id: 72dcd59e-5fa8-45f1-a669-9ff1d9bb6c84-1729287695)
╭─ error ───────────────────────────────────────────────────────────────────────────────╮
│                                                                                       │
│  Theme ID mismatch: expected $DEV_THEME_ID but got $ACTIVE_THEME_ID.                       │
│  Request ID: 72dcd59e-5fa8-45f1-a669-9ff1d9bb6c84-1729287695                          │
│  URL:                                                                                 │
│  https://$REDACTED/account/login?return_url=%2Faccount%3F_fd%3D0%26pb%3D0             │
│                                                                                       │
│  This is likely related to an issue in upstream Shopify APIs.                         │
│  Please try again in a few minutes and report this issue:                             │
│  https://github.com/Shopify/cli/issues/new?template=bug-report.yml                    │
│                                                                                       │
╰───────────────────────────────────────────────────────────────────────────────────────╯

Shopify / cli