react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function

문제점

리덕스를 적용한 간단한 리액트 프로젝트를 만들기 위해서 리덕스를 위한 코드를 준비하고 yarn start를 했지만 화면에 아무것도 나타나지 않았습니다.

 

이후 콘솔창을 열어보니 

이런 에러가 떠있었습니다.

원인

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { createStore } from "redux";
import rootReducers from "./modules";
import { Provider } from "react-redux";

const store = createStore(rootReducers);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

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

 

package.json을 살펴보니

18 버전이었습니다.

해결

index.js를 다음과 같이 수정했습니다.

import React from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";
import { createStore } from "redux";
import rootReducers from "./modules";
import { Provider } from "react-redux";

const root = createRoot(document.getElementById("root"));
const store = createStore(rootReducers);

root.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

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

 

이렇게 하면 화면에 잘 출력되는 것을 볼 수 있습니다.

다른 해결 방법

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

npm install react@^17.0.2