fix(examples): guard the react shadow-dom mount target#10431
fix(examples): guard the react shadow-dom mount target#10431TkDodo merged 1 commit intoTanStack:mainfrom
Conversation
📝 WalkthroughWalkthroughThe example file adds a runtime guard to fail immediately when the Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
|
View your CI Pipeline Execution ↗ for commit 6128696
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
examples/react/shadow-dom/src/main.tsx (1)
12-13: Reuse existing open shadow root to avoid HMR re-entry errors.The suggested pattern safely avoids calling
attachShadow()on a previously-created open shadow root, which would throw during module reload in dev workflows.♻️ Suggested tweak
-const shadowRoot = appRoot.attachShadow({ mode: 'open' }) +const shadowRoot = appRoot.shadowRoot ?? appRoot.attachShadow({ mode: 'open' })Note: This pattern is safe because the code uses
{ mode: 'open' }; it would not work if the mode were'closed'.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/react/shadow-dom/src/main.tsx` around lines 12 - 13, The current code always calls appRoot.attachShadow({ mode: 'open' }) which throws on HMR re-entry; change it to reuse an existing open shadow root if present by checking appRoot.shadowRoot and using that when available, otherwise call appRoot.attachShadow({ mode: 'open' }), then pass the resulting shadowRoot into ReactDOM.createRoot; update the code around the shadowRoot variable and the ReactDOM.createRoot(...) call (referencing appRoot, shadowRoot, and ReactDOM.createRoot) to implement this conditional reuse.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@examples/react/shadow-dom/src/main.tsx`:
- Around line 12-13: The current code always calls appRoot.attachShadow({ mode:
'open' }) which throws on HMR re-entry; change it to reuse an existing open
shadow root if present by checking appRoot.shadowRoot and using that when
available, otherwise call appRoot.attachShadow({ mode: 'open' }), then pass the
resulting shadowRoot into ReactDOM.createRoot; update the code around the
shadowRoot variable and the ReactDOM.createRoot(...) call (referencing appRoot,
shadowRoot, and ReactDOM.createRoot) to implement this conditional reuse.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8694c110-826b-4406-bad0-748f44569c4a
📒 Files selected for processing (1)
examples/react/shadow-dom/src/main.tsx
2 participants
🎯 Changes
Adds an explicit mount target guard to the React shadow-dom example.
Previously, this entrypoint wrapped rendering in
if (appRoot), which meant amissing
#rootelement caused the example to fail silently with a blank page.This change throws a clear
Missing #root elementerror instead, matching thepattern used in other example safety fixes. It also removes the
appRoot.shadowRoot!non-null assertion by passing the createdshadowRootdirectly to the devtools.
✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit
Bug Fixes
Refactor