fix(pacer-devtools): remove inline style objects to fix setStyleProperty export error#169
Open
restareaByWeezy wants to merge 1 commit intoTanStack:mainfrom
Open
fix(pacer-devtools): remove inline style objects to fix setStyleProperty export error#169restareaByWeezy wants to merge 1 commit intoTanStack:mainfrom
restareaByWeezy 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>
|
Member
|
I'm wondering if it's more appropriate for the devtools to be expected to be client side only rendering |
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
2 participants
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.
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.