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

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

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

이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 react-dom의 createRoot 메소드가 원하는 파라미터 형식과 사용자가 작성한 코드의 파라미터가 달라서 발생한다. 지문에 나타난 그대로 해결해주면 된다. 메소드는 Element | DocumentFragment를 원하고 document.getElementById의 값은 HtmlElement | null 을 제공하기 때문에 이것의 형식을 Element로 고정하여 정의해주면 된다.

 

해결방법 : 

import { createRoot } from "react-dom/client";
import App from "./App";
const container = document.getElementById("root");
const root = createRoot(container as Element);
root.render(<App />);

위와 같이 깔끔하게 해결할 수 있다.