From 6128696ddea522152782d28e04b079f4133ecc28 Mon Sep 17 00:00:00 2001
From: grzdev <damilolaoyeniyi13@gmail.com>
Date: Wed, 8 Apr 2026 23:02:25 +0100
Subject: [PATCH] fix(examples): guard the react shadow-dom mount target

---
 examples/react/shadow-dom/src/main.tsx | 49 +++++++++++++-------------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/examples/react/shadow-dom/src/main.tsx b/examples/react/shadow-dom/src/main.tsx
index cf1b9e53493..2f7ea2400a1 100644
--- a/examples/react/shadow-dom/src/main.tsx
+++ b/examples/react/shadow-dom/src/main.tsx
@@ -6,30 +6,29 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { DogList } from './DogList'
 
 const appRoot = document.getElementById('root')
+if (!appRoot) throw new Error('Missing #root element')
 
-if (appRoot) {
-  const queryClient = new QueryClient()
-  const shadowRoot = appRoot.attachShadow({ mode: 'open' })
-  const root = ReactDOM.createRoot(shadowRoot)
+const queryClient = new QueryClient()
+const shadowRoot = appRoot.attachShadow({ mode: 'open' })
+const root = ReactDOM.createRoot(shadowRoot)
 
-  root.render(
-    <React.StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <div
-          style={{
-            width: '100vw',
-            padding: '30px',
-          }}
-        >
-          <h2>Dog Breeds</h2>
-          <DogList />
-        </div>
-        <ReactQueryDevtools
-          initialIsOpen={false}
-          buttonPosition="bottom-left"
-          shadowDOMTarget={appRoot.shadowRoot!}
-        />
-      </QueryClientProvider>
-    </React.StrictMode>,
-  )
-}
+root.render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <div
+        style={{
+          width: '100vw',
+          padding: '30px',
+        }}
+      >
+        <h2>Dog Breeds</h2>
+        <DogList />
+      </div>
+      <ReactQueryDevtools
+        initialIsOpen={false}
+        buttonPosition="bottom-left"
+        shadowDOMTarget={shadowRoot}
+      />
+    </QueryClientProvider>
+  </React.StrictMode>,
+)