Skip to content

fix(solid-query-devtools): client-side code instantiating prematurely server-side #9163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

wlemahieu
Copy link
Contributor

@wlemahieu wlemahieu commented May 19, 2025

Bug reported here.

Reproducible example here.

User experience problem:

When using the Tanstack Solid-Start app, trying to use the SolidQueryDevtools component renders [object Promise] instead of the actual devtools UI.

Technical problem:

Importing clientOnly from the same module as the one that's being dynamically imported (./devtools) through clientOnly causes client-side code to be executed on the server-side. Particularly, the solid-js/web library seems to be the cause.

The solution:

Simply separate the clientOnly() logic from the devtools.tsx logic. This separates concerns between each component's imports. Now the imports for devtools only load dynamically once, not twice (once prematurely) through importing clientOnly from the same file.

Before UI

Screenshot at May 18 21-02-42

After UI

Screenshot at May 18 20-54-14

@wlemahieu wlemahieu changed the title separate concerns of clientOnly and SolidQueryDevtools Prevent client-side code from executing on server May 19, 2025
@wlemahieu wlemahieu changed the title Prevent client-side code from executing on server fix(solid-query-devtools): client-side code executing on server, breaking UI May 19, 2025
@@ -1,5 +1,5 @@
import { isDev } from 'solid-js/web'
import { clientOnly } from './devtools'
import clientOnly from './clientOnly'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem is here, importing from ./devtools prematurely before line 6 dynamically imports it later.

@schiller-manuel
Copy link
Contributor

@birkskyum could you please have a look?

@@ -0,0 +1,43 @@
import {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No changes were made here. Just moving clientOnly to it's own file.

@wlemahieu wlemahieu changed the title fix(solid-query-devtools): client-side code executing on server, breaking UI fix(solid-query-devtools): client-side code instantiating prematurel server-side Jun 5, 2025
@wlemahieu wlemahieu changed the title fix(solid-query-devtools): client-side code instantiating prematurel server-side fix(solid-query-devtools): client-side code instantiating prematurely server-side Jun 5, 2025
@TkDodo TkDodo requested a review from ardeora June 6, 2025 07:35
Copy link

nx-cloud bot commented Jun 11, 2025

View your CI Pipeline Execution ↗ for commit 3ef4e13.

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

☁️ Nx Cloud last updated this comment at 2025-06-11 23:36:20 UTC

Copy link

pkg-pr-new bot commented Jun 11, 2025

More templates

@tanstack/angular-query-devtools-experimental

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

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 3ef4e13

@birkskyum birkskyum merged commit bd3ac49 into TanStack:main Jun 11, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants