In a Checkout UI Extension with network_access = true
, calling the global fetch()
function causes the following runtime error:
Uncaught (in promise) TypeError: Request is not a constructor
This issue occurs even when generating the extension using the candidate version of the CLI:
POLARIS_UNIFIED=true shopify app generate extension
Expected Behavior
Since network_access = true
is enabled in the extension config, fetch()
should work for making external network requests.
Also, typeof Request === "function"
and new Request(...)
works outside the fetch()
implementation, so this constructor should be valid in the runtime.
Actual Behavior
Calling fetch()
causes a runtime crash with TypeError: Request is not a constructor
.
The decompiled internal source of Shopify’s fetch()
implementation contains:
const v = new Request(s, u); // ← causes the crash
This assumes that Request
is a working native constructor — but in the extension runtime, although typeof Request === "function"
, it is not actually constructible inside fetch()
.
Steps to Reproduce
-
Create a basic Checkout UI Extension using Shopify CLI (candidate version):
POLARIS_UNIFIED=true shopify app generate extension
-
Set the following in
shopify.extension.toml
:network_access = true
-
Add the following code to your extension:
const testFetch = async () => { try { const res = await fetch("https://httpbin.org/post", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ test: true }), }); const json = await res.json(); console.log("✅ Success:", json); } catch (e) { console.error("❌ fetch failed:", e); } }; testFetch();
-
Preview or deploy the extension
-
View the browser console
Expected result: Success response from
httpbin
Actual result:
TypeError: Request is not a constructor
Diagnostics
typeof Request === "function"
new Request("https://example.com")
works outsidefetch()
fetch()
internally callsnew Request(...)
, which fails at runtimeNo
cross-fetch
,graphql-request
, or fetch polyfill is includeddist/
output confirmsRequest
is not bundled manually
Environment
Key | Value |
---|---|
Shopify CLI | 3.82.1 |
Node.js | v20.11.1 |
Extension Runtime | Checkout UI Extension |
network_access | true |
Browser | Chrome |
Suggested Fix
Please either:
- Update the
fetch()
implementation in the runtime to not rely onnew Request(...)
, or - Ensure the
Request
constructor in the sandbox environment is valid and constructible
Additional Notes
- This issue appears even in a completely clean extension with minimal dependencies
fetch()
is promoted as usable whennetwork_access = true
, so this behavior is unexpected- The runtime polyfill may be internally broken or partially defined
Thanks in advance for looking into this!