Getting error while using react-router-v6 in typescript

Question

here is my code i'm getting the error

Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment'.

> 27 | createRoot(document.getElementById("root")).render(
    |            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 28 |   <RouterProvider router={router} />
 29 | );

code

import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
      </div>
    ),
  },
]);


createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

Answer 1

Because document.getElementById can return null if there is no element with the specified ID, Typescript is complaining. You can specify that it's a variable of type Element like this:

createRoot(document.getElementById("root") as Element).render(
  <RouterProvider router={router} />
);