fix(thenable): use Object.create() to avoid Promise mutation in headless Chromium#10653
Open
Zelys-DFKH wants to merge 2 commits into
Open
fix(thenable): use Object.create() to avoid Promise mutation in headless Chromium#10653Zelys-DFKH wants to merge 2 commits into
Zelys-DFKH wants to merge 2 commits into
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughThis PR refactors pendingThenable to derive the exported thenable from an internal Promise via Object.create(), suppresses unhandled rejection noise with a no-op .catch(), and adds a changeset entry documenting the fix for headless Chromium Promise mutation. ChangesThenable Promise Mutation Fix
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx run-many --target=build --exclude=examples/*... |
❌ Failed | 4s | View ↗ |
☁️ Nx Cloud last updated this comment at 2026-05-07 23:10:22 UTC
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/query-core/src/thenable.ts`:
- Around line 57-59: Creating thenable via Object.create(promise) yields an
object missing Promise internal slots so React's Suspense/use will throw when
calling then; fix by copying/binding the Promise prototype methods from the
underlying promise onto the PendingThenable instance (e.g., set thenable.then =
promise.then.bind(promise), thenable.catch = promise.catch.bind(promise),
thenable.finally = promise.finally.bind(promise)) so that thenable (returned as
nextResult.promise) behaves like a real Promise while still carrying the extra
status/result fields.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 380bf36f-7464-4be4-ab48-a6ff0f738d58
📒 Files selected for processing (2)
.changeset/fix-promise-mutation-10509.mdpackages/query-core/src/thenable.ts
added 2 commits
May 21, 2026 15:20
…ess Chromium Resolves TanStack#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.
…n 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).
Zelys-DFKH
force-pushed
the
fix/promise-mutation-headless-chromium-10509
branch
from
1c40c3f to
8cecf55
Compare
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
1 participant
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.
Your issue nailed it. Headless Chromium treats Promise internal slots as sealed, so mutations like
thenable.status = 'pending'silently fail. The.then()handler fires, but the wrapper never updates — notification callbacks never run, and useQuery stays pending forever.It's a small but real problem for testing. I've spent hours debugging similar patterns.
The Fix
Create a wrapper object with the Promise as its prototype instead of mutating the Promise directly. This lets custom properties live on the wrapper while preserving all Promise semantics:
The wrapper's custom properties work. The
.then()chain works via prototype. No behavior changes, fully backward compatible.Files Changed
packages/query-core/src/thenable.ts— Wrap the Promise instead of mutating itTesting
Verify in headless mode:
Fixes #10509
Summary by CodeRabbit