fix: window reference on server #234
Conversation
🦋 Changeset detectedLatest commit: d714b19 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Signed-off-by: JounQin <admin@1stg.me>
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughReplaces a server-side require of Masonry with a browser-only dynamic import to avoid a server-side Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant SSR as Server (SSR)
participant Browser as Client (Browser)
participant MasonryComp as Masonry component
participant MasonryLib as MasonryLayout (lib)
Note over SSR,MasonryComp: During server render
SSR->>MasonryComp: render()
MasonryComp-->>SSR: avoid instantiating Masonry (no window usage)
Note over Browser,MasonryComp: On client hydration
Browser->>MasonryComp: hydrate / mount
MasonryComp->>MasonryLib: dynamic import() (async)
MasonryLib-->>MasonryComp: resolves with MasonryLayout
MasonryComp->>MasonryLib: new MasonryLayout(element, options)
MasonryComp-->>Browser: layout applied to `.masonry-item` elements
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (3)**/*.{js,ts,tsx,jsx,json,yml,yaml,md}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{js,ts,tsx,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
🔇 Additional comments (2)
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. Comment |
commit: |
There was a problem hiding this comment.
Pull request overview
This PR fixes a server-side rendering issue by preventing the masonry-layout library from being accessed on the server where the window object is unavailable. The solution conditionally imports the library only in browser environments.
- Replaces synchronous
require()with conditional top-levelawait import()guarded by window check - Updates type imports to use named
Optionstype instead of namespace access - Adds non-null assertion when instantiating MasonryLayout since it's guaranteed to exist in browser context
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/doom/src/runtime/components/Masonry.tsx | Conditionally imports masonry-layout only in browser environments to prevent server-side window reference errors |
| .changeset/lazy-crabs-itch.md | Documents the fix for window reference on server |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.changeset/lazy-crabs-itch.mdpackages/doom/src/runtime/components/Masonry.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{js,ts,tsx,jsx,json,yml,yaml,md}
📄 CodeRabbit inference engine (AGENTS.md)
Format code with Prettier according to the project's Prettier configuration
Files:
packages/doom/src/runtime/components/Masonry.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript strict mode for type safety
Files:
packages/doom/src/runtime/components/Masonry.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Follow ESLint rules defined in eslint.config.js
Files:
packages/doom/src/runtime/components/Masonry.tsx
🔇 Additional comments (4)
.changeset/lazy-crabs-itch.md (1)
1-5: LGTM! Changeset format is correct.The changeset follows the standard format with appropriate patch version type for this bug fix.
packages/doom/src/runtime/components/Masonry.tsx (3)
1-1: LGTM! Type-only import is safe.The type-only import is correctly used and will be erased at runtime, preventing any server-side issues.
5-6: LGTM! Type update is correct.The type change from
MasonryLayout.OptionstoOptionsis consistent with the new import and maintains type safety.
22-22: Non-null assertion relies on top-level await completion.The non-null assertion
MasonryLayout!assumes the top-level await completed successfully. WhileuseLayoutEffectonly runs on the client where the import should be complete, this creates a tight coupling to the top-level await pattern.The refactor suggested in the previous comment (moving the import into the effect) would eliminate the need for this assertion and handle the async nature more explicitly.
Based on coding guidelines, ensure this passes TypeScript strict mode checks.
Summary by CodeRabbit
Bug Fixes
Enhancements
✏️ Tip: You can customize this high-level summary in your review settings.