fix(examples): guard missing mount targets in react examples by grzdev · Pull Request #10226 · TanStack/query

grzdev · 2026-03-04T19:21:54Z

🎯 Changes

What
Adds safety guards for mount targets in several React examples before calling ReactDOM.createRoot().

Why
These examples previously used unsafe patterns such as:

document.getElementById('root') as HTMLElement

If the DOM element is missing or renamed, the example can crash at runtime with an unclear error. Since examples are frequently copied, adding explicit runtime guards improves reliability and developer experience.

Changes

Replaces getElementById('root') as HTMLElement with guarded lookups
Throws a clear error when the #root mount target is missing
Passes the verified element into ReactDOM.createRoot()

Scope
Examples-only change. No package/runtime changes.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Bug Fixes
- Improved error handling across React example applications. Added explicit validation to ensure the required HTML root element exists at startup, with a clear error message displayed immediately if it's missing. This prevents silent failures and enhances the debugging experience.

changeset-bot · 2026-03-04T19:22:16Z

⚠️ No Changeset found

Latest commit: 3653802

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

nx-cloud · 2026-03-04T19:22:30Z

View your CI Pipeline Execution ↗ for commit 3653802

Command	Status	Duration	Result
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	<1s	View ↗
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	34s	View ↗

☁️ Nx Cloud last updated this comment at 2026-03-04 19:23:48 UTC

coderabbitai · 2026-03-04T19:22:42Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c3afc6f9-2a16-4adb-812d-0023b80c0f8d

📥 Commits

Reviewing files that changed from the base of the PR and between fe25edc and 3653802.

📒 Files selected for processing (4)

examples/react/basic/src/index.tsx
examples/react/rick-morty/src/index.tsx
examples/react/simple/src/index.tsx
examples/react/star-wars/src/index.tsx

📝 Walkthrough

Walkthrough

Four React example entry files replace TypeScript non-null assertions for the root DOM element with explicit runtime null checks that throw descriptive errors if the element is missing, improving error handling at startup.

Changes

Cohort / File(s)	Summary
React Example Entry Files `examples/react/basic/src/index.tsx`, `examples/react/rick-morty/src/index.tsx`, `examples/react/simple/src/index.tsx`, `examples/react/star-wars/src/index.tsx`	Replaced `document.getElementById('root') as HTMLElement` type assertion with a nullable lookup followed by a runtime guard that throws an error if the root element is missing, improving early failure detection.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

TanStack/query#10205: Applies the same null-check pattern to example entry files replacing non-null assertions on DOM element lookups.
TanStack/query#10208: Makes identical changes across example entry files—replacing direct assertions with runtime guards on mount element retrieval.
TanStack/query#10144: Replaces forced non-null DOM lookups in example entry files with explicit runtime guards that throw on missing mount elements.

Poem

🐰 Four examples now stand guard,
No more casting, truth is hard—
null checks bloom where roots should be,
Safer starts for all to see! 🌱

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically summarizes the main change: adding safety guards for missing mount targets in React examples.
Description check	✅ Passed	The description comprehensively covers the changes, rationale, and scope; includes completed checklist items; and correctly identifies this as a dev-only change requiring no changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-03-04T19:23:39Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10226

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10226

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10226

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10226

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10226

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10226

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10226

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10226

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10226

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10226

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10226

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10226

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10226

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10226

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10226

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10226

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10226

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10226

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10226

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10226

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10226

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10226

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10226

commit: 298ca08

fix(examples): guard missing mount targets in react examples

3653802

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(examples): guard missing mount targets in react examples#10226

fix(examples): guard missing mount targets in react examples#10226
grzdev wants to merge 1 commit intoTanStack:mainfrom
grzdev:fix/examples-react-mount-target-guards

grzdev commented Mar 4, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Mar 4, 2026

Uh oh!

nx-cloud bot commented Mar 4, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 4, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new bot commented Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

grzdev commented Mar 4, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Mar 4, 2026

⚠️ No Changeset found

Uh oh!

nx-cloud bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new bot commented Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

grzdev commented Mar 4, 2026 •

edited by coderabbitai bot

Loading

nx-cloud bot commented Mar 4, 2026 •

edited

Loading

coderabbitai bot commented Mar 4, 2026 •

edited

Loading