From cfb1576bcad83576c4077772b11a65cada01b053 Mon Sep 17 00:00:00 2001 From: Zelys Date: Thu, 7 May 2026 18:00:07 -0500 Subject: [PATCH 1/2] fix(thenable): use Object.create() to avoid Promise mutation in headless Chromium Resolves #10509 where useQuery stays pending indefinitely in Puppeteer/Playwright. Headless Chromium enforces stricter Promise semantics, treating internal slots as sealed. The custom properties set on the Promise (status, resolve, reject) were silently failing in these environments. By wrapping the Promise with Object.create() instead of mutating it directly, we preserve all Promise behavior via the prototype chain while allowing custom properties to live on the wrapper object. This maintains full backward compatibility - all consumers call .then() which continues to work via prototype chain inheritance, and the notification callbacks now fire correctly in all JavaScript environments. --- .changeset/fix-promise-mutation-10509.md | 7 +++++++ packages/query-core/src/thenable.ts | 10 ++++++---- 2 files changed, 13 insertions(+), 4 deletions(-) create mode 100644 .changeset/fix-promise-mutation-10509.md diff --git a/.changeset/fix-promise-mutation-10509.md b/.changeset/fix-promise-mutation-10509.md new file mode 100644 index 00000000000..64675592483 --- /dev/null +++ b/.changeset/fix-promise-mutation-10509.md @@ -0,0 +1,7 @@ +--- +"@tanstack/query-core": patch +--- + +fix(thenable): use Object.create() to avoid Promise mutation in headless Chromium + +Resolves issue where useQuery stays pending indefinitely in Puppeteer/Playwright. Headless Chromium enforces stricter Promise semantics, treating internal slots as sealed. The fix wraps the Promise with Object.create() instead of mutating it directly, preserving all Promise behavior while allowing custom properties. diff --git a/packages/query-core/src/thenable.ts b/packages/query-core/src/thenable.ts index 4b9a1ddaa17..9785d91927e 100644 --- a/packages/query-core/src/thenable.ts +++ b/packages/query-core/src/thenable.ts @@ -45,16 +45,18 @@ export function pendingThenable(): PendingThenable { let resolve: Pending['resolve'] let reject: Pending['reject'] // this could use `Promise.withResolvers()` in the future - const thenable = new Promise((_resolve, _reject) => { + const promise = new Promise((_resolve, _reject) => { resolve = _resolve reject = _reject - }) as PendingThenable + }) - thenable.status = 'pending' - thenable.catch(() => { + promise.catch(() => { // prevent unhandled rejection errors }) + const thenable = Object.create(promise) as PendingThenable + thenable.status = 'pending' + function finalize(data: Fulfilled | Rejected) { Object.assign(thenable, data) From 8cecf55dffa9306185010841a691858de5638e11 Mon Sep 17 00:00:00 2001 From: Zelys Date: Thu, 7 May 2026 18:08:56 -0500 Subject: [PATCH 2/2] refactor: bind Promise methods to avoid incompatible receiver error in React Suspense The Object.create(promise) wrapper pattern requires explicit method binding. Without it, React's Suspense and other code calling .then() fails with 'Method Promise.prototype.then called on incompatible receiver' because the native Promise implementation requires internal slots [[PromiseState]] and [[PromiseResult]] to exist on the object .then() is called on. Binding (e.g., thenable.then = promise.then.bind(promise)) ensures the methods execute in the correct context (the underlying promise with slots) while preserving all custom wrapper properties (status, resolve, reject). --- packages/query-core/src/thenable.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/query-core/src/thenable.ts b/packages/query-core/src/thenable.ts index 9785d91927e..e289a8272c9 100644 --- a/packages/query-core/src/thenable.ts +++ b/packages/query-core/src/thenable.ts @@ -45,7 +45,7 @@ export function pendingThenable(): PendingThenable { let resolve: Pending['resolve'] let reject: Pending['reject'] // this could use `Promise.withResolvers()` in the future - const promise = new Promise((_resolve, _reject) => { + const promise = new Promise((_resolve, _reject) => { resolve = _resolve reject = _reject }) @@ -57,6 +57,15 @@ export function pendingThenable(): PendingThenable { const thenable = Object.create(promise) as PendingThenable thenable.status = 'pending' + // Bind Promise methods so React's Suspense and other code calling .then() + // works correctly. Without binding, the native Promise implementation checks + // for internal slots on `this`, which won't exist on the wrapper object. + thenable.then = promise.then.bind(promise) + thenable.catch = promise.catch.bind(promise) + if (promise.finally) { + thenable.finally = promise.finally.bind(promise) + } + function finalize(data: Fulfilled | Rejected) { Object.assign(thenable, data)