fix(examples): guard missing mount targets in remaining react examples (#10305)

Author: grzdev

examples/react/algolia/src/index.tsx

@@ -2,5 +2,6 @@ import ReactDOM from 'react-dom/client'
 
 import App from './App'
 
-const rootElement = document.getElementById('root') as HTMLElement
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Missing #root element')
 ReactDOM.createRoot(rootElement).render(<App />)

examples/react/basic-graphql-request/src/index.tsx

@@ -172,5 +172,6 @@ function Post({
   )
 }
 
-const rootElement = document.getElementById('root') as HTMLElement
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Missing #root element')
 ReactDOM.createRoot(rootElement).render(<App />)

examples/react/chat/src/index.tsx

@@ -96,5 +96,6 @@ function Example() {
   )
 }
 
-const rootElement = document.getElementById('root') as HTMLElement
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Missing #root element')
 ReactDOM.createRoot(rootElement).render(<App />)

examples/react/default-query-function/src/index.tsx

@@ -146,5 +146,6 @@ function Post({
   )
 }
 
-const rootElement = document.getElementById('root') as HTMLElement
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Missing #root element')
 ReactDOM.createRoot(rootElement).render(<App />)

examples/react/devtools-panel/src/index.tsx

@@ -54,5 +54,6 @@ function Example() {
   )
 }
 
-const rootElement = document.getElementById('root') as HTMLElement
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Missing #root element')
 ReactDOM.createRoot(rootElement).render(<App />)

examples/react/eslint-legacy/src/index.tsx

@@ -157,5 +157,6 @@ function App() {
   )
 }
 
-const rootElement = document.getElementById('root') as HTMLElement
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Missing #root element')
 ReactDOM.createRoot(rootElement).render(<App />)

examples/react/offline/src/index.tsx

@@ -5,7 +5,8 @@ import { worker } from './api'
 
 worker.start()
 
-const rootElement = document.getElementById('root') as HTMLElement
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Missing #root element')
 ReactDOM.createRoot(rootElement).render(
   <div style={{ padding: '16px' }}>
     <App />

examples/react/playground/src/index.tsx

@@ -457,5 +457,6 @@ function patchTodo(todo?: Todo): Promise<Todo> {
   })
 }
 
-const rootElement = document.getElementById('root') as HTMLElement
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Missing #root element')
 ReactDOM.createRoot(rootElement).render(<Root />)

examples/react/react-router/src/index.tsx

@@ -67,7 +67,8 @@ const router = createBrowserRouter([
 ])
 
 const rootElement = document.getElementById('root')
-ReactDOM.createRoot(rootElement!).render(
+if (!rootElement) throw new Error('Missing #root element')
+ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />

examples/react/suspense/src/index.tsx

@@ -90,5 +90,6 @@ function Example() {
   )
 }
 
-const rootElement = document.getElementById('root') as HTMLElement
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Missing #root element')
 ReactDOM.createRoot(rootElement).render(<App />)