Fix theme dev serving theme asset for /cdn/extensions/ requests

[wes-shaw]

Summary

shopify theme dev was serving a theme asset in response to an app extension's asset request (/cdn/extensions/<uuid>/<app>/assets/<name>) whenever the theme had a same-named file. The colliding script then loaded twice (once as the theme asset, once as the extension asset that was silently swapped), causing duplicated execution — e.g. double-bound event handlers. Reported in this community thread (Klaviyo Email Marketing's app.js vs a theme app.js).

The live storefront serves both URLs correctly; this was local-dev only. Reproduces on main and on @shopify/cli 4.1.0.

Root cause

In packages/theme/src/cli/utilities/theme-environment/local-assets.ts, findLocalFile tried the theme matcher first via ??:

tryGetFile(/^(?:\/cdn\/.*?)?\/assets\/([^?]+)/, ctx.localThemeFileSystem) ??
tryGetFile(/^(?:\/ext\/cdn\/extensions\/.*?)?\/assets\/([^?]+)/, ctx.localThemeExtensionFileSystem) ??

The theme matcher's optional (?:\/cdn\/.*?)? prefix is greedy enough to swallow the entire /cdn/extensions/<uuid>/<app> segment, capturing only the basename after /assets/. tryGetFile derives the lookup key from the capture alone (joinPath('assets', matchedFileName)), discarding the URL path, so /cdn/extensions/.../assets/app.js resolves to assets/app.js in localThemeFileSystem and is served.

The extension matcher only accepts /ext/cdn/extensions/ (note /ext/), so it never gets a chance for a bare /cdn/extensions/ request, and the ?? short-circuits before getProxyHandler (which already forwards extension CDN traffic to cdn.shopify.com) is ever reached.

Fix

Tighten the theme regex with a negative lookahead so its /cdn/ prefix cannot be followed by extensions/, and broaden the extension regex to also accept /cdn/extensions/... in addition to /ext/cdn/extensions/....

const THEME_ASSET_PATTERN = /^(?:\/cdn\/(?!extensions\/).*?)?\/assets\/([^?]+)/
const THEME_EXTENSION_ASSET_PATTERN = /^(?:\/(?:ext\/)?cdn\/extensions\/.*?)?\/assets\/([^?]+)/

When the requested extension asset is not in localThemeExtensionFileSystem, findLocalFile returns {fileKey: undefined} and getAssetsHandler returns early — the request falls through to getProxyHandler which forwards to cdn.shopify.com and the real installed-app asset is returned.

Behaviour after fix

• /cdn/extensions/<uuid>/<app>/assets/<name> → proxied to CDN, or served from localThemeExtensionFileSystem when present (covers theme-app-extension dev against the vanity CDN form).
• /cdn/shop/t/<id>/assets/<name> → still served from localThemeFileSystem.
• /ext/cdn/extensions/... → still served from localThemeExtensionFileSystem.
• Bare /assets/<name> → unchanged.

Test coverage

New packages/theme/src/cli/utilities/theme-environment/local-assets.test.ts covers six cases for findLocalFile, including the regression (a theme assets/app.js must not be returned for a /cdn/extensions/.../assets/app.js request) and the locally-developed-extension precedence case. Confirmed locally: with the regex change reverted, exactly the 2 collision tests fail; with the fix applied, all 6 new tests pass and the full packages/theme test suite (163 tests) still passes, along with nx type-check theme and nx lint theme.

Tophatting

In a project that uses shopify theme dev:

1. Install an app whose extension bundles an asset, e.g. assets/app.js.
2. Add a theme asset with the same filename: assets/app.js, with distinct contents (e.g. console.log('THEME') vs the app's content).
3. Run shopify theme dev and load a page that renders both:
   • theme tag: <script src="/cdn/shop/t/<id>/assets/app.js?v=...">
   • extension tag (from content_for_header): <script src="/cdn/extensions/<uuid>/<app>/assets/app.js">
4. curl http://localhost:9292/cdn/extensions/<uuid>/<app>/assets/app.js — before the fix this returns the theme's app.js; after the fix it returns the real app's app.js (proxied from cdn.shopify.com).
5. Confirm curl http://localhost:9292/cdn/shop/t/<id>/assets/app.js still returns the local theme's app.js.

Notes

• File/line references are from main; 4.1.0 line numbers differ slightly but the logic is identical.
• No existing Shopify/cli issue or PR tracks this. Related but distinct: [Bug]: shopify app dev is not working when a theme extension exists #4549, [Bug]: Theme App Extension - Asset CDN link random UUID #4567, [Bug]: Incorrect JavaScript Asset URLs for Theme App Extensions #3488.
• Per .github/CODEOWNERS, packages/theme/** is owned by @shopify/developer-platforms and @shopify/dev_experience.

Requested by Wes Shaw wes.shaw@shopify.com

[Copilot]

Pull request overview

Fixes a bug where shopify theme dev would serve a local theme asset in response to an app extension's /cdn/extensions/<uuid>/<app>/assets/<name> request when the theme contained a same-named file. The overly-permissive theme-asset regex was capturing extension CDN paths and returning the wrong file.

Changes:

• Tighten THEME_ASSET_PATTERN with a negative lookahead so /cdn/ cannot be followed by extensions/.
• Broaden THEME_EXTENSION_ASSET_PATTERN to also match storefront-emitted /cdn/extensions/... URLs (in addition to /ext/cdn/extensions/...).
• Export findLocalFile and add new unit tests covering bare, vanity-CDN, extension, and collision cases.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
packages/theme/src/cli/utilities/theme-environment/local-assets.ts	Replace inline regex literals with named, documented patterns; export findLocalFile.
packages/theme/src/cli/utilities/theme-environment/local-assets.test.ts	New tests for findLocalFile, including the regression case.
.changeset/river-theme-dev-cdn-extensions-collision.md	Patch-level changeset describing the fix.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.