From 2110a49a97ccb055c1b3825206923ad12555469f 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 1c40c3fb39de640e4f0a0ec603f16d3e130de156 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 | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/query-core/src/thenable.ts b/packages/query-core/src/thenable.ts index 9785d91927e..a4aa6cdf652 100644 --- a/packages/query-core/src/thenable.ts +++ b/packages/query-core/src/thenable.ts @@ -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)