[React] react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a functiontroubleshooting2023. 9. 20. 17:39
목차
문제 상황
프로젝트 진행 중 다음과 같은 오류 메시지에 직면했다.
Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function
이 오류는 잘못된 모듈 임포트 때문에 발생했음을 알 수 있었다. 그러나 정확한 원인을 찾기 위해 코드를 더 깊게 들여다봐야 했다.
해결 과정
코드를 검토하던 중, ReactDOM 모듈을 잘못 임포트한 것을 발견했다. 초기 코드는 아래와 같았다.
import ReactDOM from 'react-dom/client';
이를 바로잡기 위해, 다음과 같이 코드를 수정했다.
import ReactDOM from 'react-dom';
이렇게 수정한 후, 프로젝트를 다시 실행하니 오류가 해결되었다.
오류는 해결되었는데, 다른 문제가 있었다.
ReactDOM.render is no longer supported in React 18. Use createRoot instead. 라는 경고가 떠서 뭔가 미심쩍어 알아보았다. 경고 문구 그대로 ReactDOM 대신 createRoot를 사용해야하나보구나 하고
기존 코드
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'),
() => {
console.log('rendered!');
}
);
에서 아래 처럼 바꿔주었더니 모든 에러와 경고 문구가 사라졌다!
import React from 'react';
import {createRoot} from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>,
);
여기선 또 'react-dom/client'에서 import하라고 한다.
결론
이번 사례를 통해, 때때로 작은 실수가 큰 오류를 유발할 수 있음을 깨달았다. 오류 메시지를 주의 깊게 분석하고, 코드를 세심하게 검토하는 것이 중요함을 다시 한번 상기시켰다.
간단한 해결 방법이지만, 이러한 공유를 통해 다른 개발자들이 유사한 문제를 빠르게 해결하는 데 도움이 되길 바란다.
728x90
반응형
LIST
'troubleshooting' 카테고리의 다른 글
@kdj :: Childev'note
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!