Serve UI extension source maps during app dev - #8212
Open
vividviolet wants to merge 1 commit into
Open
Conversation
The built bundle ends with a relative `//# sourceMappingURL=<handle>.js.map`, so the browser requests the map next to the asset's own URL — `/assets/<target>/<handle>.js.map` — a key no asset payload emits. The request 404'd and DevTools only ever showed minified output. Register that key on the asset resolver when the map exists, and serve `.js.map` requests from the extension directory. Maps are deliberately absent from the bundle: `keepBuiltSourcemapsLocally` moves them back into the extension directory so `.js.map` files never reach a deploy bundle. No build step changes, so that invariant is untouched. Unregistered `.js.map` paths 404, keeping the resolver the allowlist for this route. Assisted-By: devx/5a367c53-dfe0-42d0-8b9f-5258f54d589a
craigmichaelmartin
approved these changes
Jul 30, 2026
vividviolet
enabled auto-merge
July 30, 2026 14:08
isaacroldan
approved these changes
Jul 30, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
Source maps stopped working for UI extensions in
shopify app dev. The main asset is served fromhttps://localhost:3458/extensions/dev-<uuid>/assets/<target>/main.jsand ends with a relative//# sourceMappingURL=<handle>.js.map, so the browser requests/assets/<target>/<handle>.js.map. Nothing emits that URL key, so the dev server 404'd it andDevTools only ever showed minified output.
The map itself is generated — it just isn't in the directory the dev server reads from.
ExtensionInstance.keepBuiltSourcemapsLocallymoves<handle>.js.mapout of the bundle andinto the extension directory, which is what keeps
.js.mapfiles out of deploy bundles. Thatinvariant has to stay, so the fix is on the serving side only.
WHAT is this pull request doing?
services/dev/extension/payload.ts: when a built asset has a source map in the extensiondirectory, register it on the asset resolver under the key the relative
sourceMappingURLresolves to (
<target>/<handle>.js.map). It is not added to the payload'sassets— it's afetchable sibling, not a declared asset.
services/dev/extension/server/middlewares.ts: resolve.js.mappaths against the extensiondirectory instead of the bundle (traversal guard follows the new root), and serve
.mapasapplication/json..js.maprequests without a resolver entry 404, so the resolver remains theallowlist for this route and the extension directory isn't otherwise readable.
No build step changes, so nothing new can reach a deploy bundle.
.js.mapis unambiguous as amarker here because deploy bundles exclude those files unconditionally
(
BUNDLE_EXCLUSION_PATTERNS).How to test your changes?
shopify app devwith an app that has an admin UI extension..js.maprequest should be200(
application/json) and DevTools Sources should show the original TSX.Automated coverage (real temp dirs, no fs mocking):
payload.test.ts— map registered when present, not registered when absent.middlewares.test.ts— a registered map is served from the extension directory while the bundledir is deliberately map-free (so it also pins "not served from the bundle"); an unregistered
.js.map404s.Checklist
patch) and added a changeset