Fix SSR Build Failure: Add Browser Detection for Document Access #987
Conversation
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
Problem The application build was failing during server-side rendering (SSR) with the error: Apply to icon-lib.ts This occurred because the theme store subscription was directly accessing document.body.className during server-side rendering, where the document object is not available. Solution Added browser detection import from $app/environment Wrapped document.body.className assignment in a browser check to prevent server-side execution Fixed TypeScript typing issues for dynamic icon library access Changes Fixed: SSR build failure by adding browser detection guard Improved: Type safety for icon library dynamic access Maintained: All existing functionality for client-side theme switching
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Problem
The application build was failing during server-side rendering (SSR) with the error: Apply to icon-lib.ts
This occurred because the theme store subscription was directly accessing document.body.className during server-side rendering, where the document object is not available.
Solution
Added browser detection import from $app/environment Wrapped document.body.className assignment in a browser check to prevent server-side execution Fixed TypeScript typing issues for dynamic icon library access Changes
Fixed: SSR build failure by adding browser detection guard Improved: Type safety for icon library dynamic access
Maintained: All existing functionality for client-side theme switching
Please check if the PR fulfills these requirements
What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
What commits does this PR relate to?
Thank you for your contribution
We hope you stay around and connect with our growing community!