docs(examples): guard the react shadow-dom mount target (#10431)

Author: grzdev

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>,
+)