Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function

문제점

React로 간단한 시계(Clock) 컴포넌트를 만들고
index.js 파일을 수정하고 렌더링 했지만, 화면에 아무것도 나타나지 않음

콘솔을 보니

Uncaught TypeError: react_dom_clientWEBPACK_IMPORTED_MODULE_1.render is not a function

이런 에러가 떠있었다.

원인

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

import Clock from "./chapter_04/clock";

setInterval(() => {
  ReactDOM.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>,
    document.getElementById("root")
  );
}, 1000);

reportWebVitals();

여기에 사용한 ReactDOM은 React 18의 최신 가져오기 방법에서 더 이상 사용되지 않는다.

packge.json을 보니

18버전이었다.

해결

index.js를 아래와같이 수정하였다.

import React from "react";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import { createRoot } from "react-dom/client";
import Clock from "./chapter_04/clock";

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

setInterval(() => {
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>
  );
}, 1000);

reportWebVitals();

ReactDOM대신 createRoot를 import해서 사용한다.

이렇게 했더니 화면에 잘 출력 되었다😄

참고: https://badcodernocookie.com/uncaught-typeerror-react_dom_client__webpack_imported_module_1__-is-not-a-function/

또 다른 해결 방법은 react 버전을 17로 다운그레이드하는 것

npm install react@^17.0.2