React - react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function 원인과 해결 방법

개요

React 강의를 따라서 간단한 문구를 출력하는 컴포넌트를 만들고 실행했는데, 화면에 아무 내용도 노출되지 않았다.

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

import Library from './chapter03/Library';

ReactDOM.render(
  <React.StrictMode>
    <Library />
  </React.StrictMode>
);

reportWebVitals();

 

콘솔을 확인해보니 아래와 같은 에러 문구가 출력되었다.

react-dom/client 모듈을 제대로 import하지 못하고 있거나 render 메서드를 잘못 사용하고 있는 것이다.

Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function

 

원인

리액트 공식문서를 확인해보면 React 18버전부터는 ReactDOM.render를 지원하지 않는다고 한다. 대신에 createRoot를 사용하라고 되어 있다. 공식문서에 createRoot을 사용해 render하는 방법도 공유되어 있다.

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: 
https://reactjs.org/link/switch-to-createroot

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

 

내가 사용하고 있는 React 버전을 확인해보니 18버전이었다. 강의에서는 17버전 이하를 사용중이었기 때문에 해당 에러가 발생하지 않았던 것이다.

{
    ...
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    ...
}

 

해결

공식문서를 참고해서 createRoot을 통해 렌더링할 수 있었다.

import React from 'react';
import {createRoot} from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';

import Library from './chapter03/Library';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Library />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

참조

How to Upgrade to React 18 – React

react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function show in the console of localhost:3000