fix(pacer-devtools): remove inline style objects to fix setStyleProperty export error#169
fix(pacer-devtools): remove inline style objects to fix setStyleProperty export error#169restareaByWeezy wants to merge 1 commit intoTanStack:mainfrom
Conversation
…eProperty dependency
Solid.js compiler transforms `style={{ ... }}` object props into
`setStyleProperty()` calls from solid-js/web. This function only exists
in the browser build (web.js) but not the server build (server.js).
Next.js resolves solid-js/web using the server condition during SSR,
causing "Export setStyleProperty doesn't exist in target module" error.
Fix: replace all inline style objects with goober CSS classes, and use
string-based style attribute for the dynamic width value. This prevents
the Solid compiler from emitting setStyleProperty calls entirely.
Closes TanStack#131
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
|
I'm wondering if it's more appropriate for the devtools to be expected to be client side only rendering |
|
@KevinVandy Thanks for the feedback! I checked the react-pacer-devtools entry point and 'use client' is actually already declared on line 1 of src/index.ts. So even with that directive in place, the error was still happening. The root cause turned out to be that the Solid.js compiler transforms inline style objects like style={{ flex: 1 }} into setStyleProperty() calls at build time, and those calls end up as explicit imports from solid-js/web in the compiled output. The server build of solid-js/web (which Next.js resolves during SSR bundling) simply doesn't export setStyleProperty, so the error occurs before any component even tries to render. This fix removes all inline style objects from the components and replaces them with goober CSS classes, which is already the pattern used throughout the rest of the devtools codebase. That way the compiler never emits setStyleProperty calls in the first place. |
|
"use client" does not mean "client only". It only means server and client. So that has nothing to do with it. What I was meaning was that most meta frameworks export a That being said, other tanstack maintainers have recommended that we make this change too like here: #181 So we will probably ship this or that pr |
|
@KevinVandy Thanks for the correction — I appreciate you explaining the distinction between 'use client' and client-only rendering, that's a good point I hadn't considered properly. I took a look at #181 and it addresses the same issue with a similar approach. Totally fine to close this one if that PR gets merged first — just happy to see this getting fixed either way! |
2 participants
Fixes #131
When using @tanstack/react-pacer-devtools in a Next.js application, the following error occurs during SSR:
The root cause is that the Solid.js compiler transforms JSX inline style objects (style={{ ... }}) into setStyleProperty() calls. This function is exported from solid-js/web's browser build (web.js), but not from its server build (server.js). Since Next.js resolves solid-js/web using the server condition during SSR bundling, the function cannot be found.
To fix this, all inline style objects in the pacer-devtools components have been replaced with goober CSS classes, which is already the established pattern in this codebase. The one dynamic value (left panel width) is handled via a string-based style attribute, which the Solid compiler compiles to setAttribute rather than setStyleProperty.
Changes:
There are no visual or behavioral changes. The fix can be verified by checking that setStyleProperty no longer appears in the build output after this change.