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

grzdev · 2026-03-01T21:29:53Z

🎯 Changes

What
Adds safety guards for Solid example mount targets before calling render() / mount().

Why
Several Solid examples used non-null assertions (!) or as HTMLElement casts on document.getElementById(...).

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

Similar to #10144 (Svelte simple), this applies the same mount target guard pattern to the Solid examples.

Changes
Replaces getElementById(... )! and as HTMLElement with guarded lookups

Throws clear errors when #root or #app is missing

Passes the verified element into render() / mount()

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
- Enhanced application initialization across example projects with explicit runtime validation of required DOM elements, ensuring clear error messages if the app container is missing rather than silent failures.

changeset-bot · 2026-03-01T21:30:00Z

⚠️ No Changeset found

Latest commit: 51606bb

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-01T21:30:21Z

View your CI Pipeline Execution ↗ for commit 51606bb

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

☁️ Nx Cloud last updated this comment at 2026-03-01 21:31:56 UTC

coderabbitai · 2026-03-01T21:30:30Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between df928be and 51606bb.

📒 Files selected for processing (6)

examples/solid/basic-graphql-request/src/index.tsx
examples/solid/basic/src/index.tsx
examples/solid/default-query-function/src/index.tsx
examples/solid/offline/src/index.tsx
examples/solid/simple/src/index.tsx
examples/solid/solid-start-streaming/src/entry-client.tsx

📝 Walkthrough

Walkthrough

Six Solid.js example files are updated to add explicit null-checking for DOM root elements before rendering. Each replaces unsafe non-null assertions with explicit runtime guards that throw errors if the target element is missing.

Changes

Cohort / File(s)	Summary
Solid.js Root Element Guards `examples/solid/basic-graphql-request/src/index.tsx`, `examples/solid/basic/src/index.tsx`, `examples/solid/default-query-function/src/index.tsx`, `examples/solid/offline/src/index.tsx`, `examples/solid/simple/src/index.tsx`, `examples/solid/solid-start-streaming/src/entry-client.tsx`	Replaces non-null assertions on DOM element retrieval with explicit null-checks. Each file retrieves the root/app element into a variable, throws an error if missing, then passes the verified element to render. Maintains existing render flow with improved runtime safety.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

documentation

Poem

🐰 Root checks in place, so safe and sound,
No more assertions flying 'round!
Null guards stand tall, errors now clear,
Your Solid apps have nothing to fear! 🌱

🚥 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 Solid examples.
Description check	✅ Passed	The description comprehensively covers the motivation, changes, scope, and includes all required checklist items properly completed.

_{✏️ 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-01T21:31:31Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: fec859d

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

51606bb

TkDodo merged commit c654c36 into TanStack:main Mar 2, 2026
6 checks passed

coderabbitai bot mentioned this pull request Mar 2, 2026

fix(examples): guard missing mount target in preact simple example #10208

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(examples): guard missing mount targets in solid examples#10205

fix(examples): guard missing mount targets in solid examples#10205
TkDodo merged 1 commit intoTanStack:mainfrom
grzdev:fix/examples-solid-mount-target-guards

grzdev commented Mar 1, 2026 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Mar 1, 2026

nx-cloud bot commented Mar 1, 2026 •

edited

Loading

coderabbitai bot commented Mar 1, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

❌ Failed checks (1 warning)

pkg-pr-new bot commented Mar 1, 2026

Uh oh!

Labels

2 participants

Uh oh!

Conversation

grzdev commented Mar 1, 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

changeset-bot bot commented Mar 1, 2026

⚠️ No Changeset found

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

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

❌ Failed checks (1 warning)

pkg-pr-new bot commented Mar 1, 2026

Uh oh!

Labels

2 participants

grzdev commented Mar 1, 2026 •

edited by coderabbitai bot

Loading

nx-cloud bot commented Mar 1, 2026 •

edited

Loading

coderabbitai bot commented Mar 1, 2026 •

edited

Loading