React 18 클라이언트 렌더링 API 업데이트 관련 TS 이슈 (closed)

현재 이 이슈는 closed 됨.

React 18에서 클라이언트 렌더링 API가 업데이트 되었다.

ReactDOM.render는 React 18에서 더 이상 지원되지 않습니다. 대신 createRoot를 사용하세요. 새 API로 전환할 때까지 앱은 React 17을 실행하는 것처럼 작동합니다. 자세히 알아보기: https://reactjs.org/link/switch-to-createroot

그런데 Typescript 템플릿으로 생성하고 createRoot를 적용하면?

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'

이런 에러가 뜬다.

https://github.com/facebook/react/issues/24196

아직 typescript에 @types/react-dom이 아직 react-dom@18 유형 정의로 업데이트되지 않은 것 같다는 답변이 달렸다.

@types/react, @types/react-dom을 업그레이드하고, 선택 사항이 있으면 가장 높은 버전을 선택

npm install @types/react @types/react-dom

그 다음 tsconfig.json에 아래 옵션을 추가한다.

compilerOptions: {
  "types": [
  	"react/next", 
  	"react-dom/next", 
  ] 
}

그 후 index.tsx에 예외처리 코드를 추가하면 에러가 사라진다.

if (!rootElement) throw new Error('Failed to find the root element');

참고 링크 : https://www.quanguanzhou.top/post/36274.html