GRIDY

Web Frontend Developer

에러 메세지는 아래와 같다

Module not found: Error: Can't resolve 'react-dom/client' in '/Users/laud/Laud/Practice/dmsweb/src'
ERROR in ./src/index.js 5:0-40
Module not found: Error: Can't resolve 'react-dom/client' in '/Users/laud/Laud/Practice/dmsweb/src'

webpack compiled with 1 error

구글에 module not error can’t resolve ‘react-dom/client’라고 검색하여 최상단 스택 오버플로우 문서를 봤다.

답변 중에서 가장 상단에 있는 내용을 읽어보았다.

아마 추측 되는 원인은 React 17과 React 18에서 index.js 작성 방식이 달라진게 원인인 것 같다.
나는 create-react-app을 통해 리액트 프로젝트를 생성했고, 17버전 react 프로젝트로 작업하기 위해 react와 react-dom 버전을 낮추었었다.

그럼, 이제 코드를 고쳐보자

<원본 코드>

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </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();

<변경 후 코드>

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

// 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();