[React 에러] Cannot find module 'react-dom/client 에러 해결

에러

React v18 환경에서 v17으로 다운그레이드 하고나니까 아래 같은 에러가 발생했다.

 

[에러 코드]

Cannot find module 'react-dom/client'

 

원인

index.js 파일에서 react-dom/client 모듈을 찾을 수 없어서 발생한 문제다.

 

react-dom/client는 v18에서 새로 추가된 모듈이다.

React v18 부터는 이 모듈을 이용해 DOM을 렌더링한다.

 

반면 React v18 이전 버전은 다른 모듈(react-dom)을 사용하여 렌더링한다.

따라서 이걸 회귀시켜주면 된다.

 

해결

이전 방식의 react-dom을 사용하여 DOM을 렌더링 해주면 된다.

 

1. ReactDOM을 react-dom 에서 import 해준다.

// import ReactDOM from 'react-dom/client'; // react v18 버전용
import ReactDOM from 'react-dom';  // react v17 버전용

 

2. DOM 렌더링 코드를 수정해준다.

// react v 18 버전 용
// const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
// root.render(<App />);

// react v 17 버전용
ReactDOM.render(
  <React.StrictMode>
        <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 

이와 같은 문제를 피하기 위해선

버전별 업데이트된 사항을 잘 숙지하고, 공식문서를 평소 탐독하는 것이 중요할 것 같다.