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..a4aa6cdf652 100644 --- a/packages/query-core/src/thenable.ts +++ b/packages/query-core/src/thenable.ts @@ -45,16 +45,27 @@ 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' + + // 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)