npx create-react-app 으로 리액트 프로젝트를 세팅하면,
항상 최신 버전의 react, react-dom 으로 설치가 된다.
그러나 다른 라이브러리와 호환이 안되는 등의 이슈로 인해,
react의 버전을 변경해야 할 때가 있다.
혹은,
GitHub 레퍼지터리 등에서 clone/pull 해온 프로젝트에서
npm install || yarn install 을 실행하면 버전이 서로 안 맞는다는 식의 에러코드가 쏟아질 때가 있다.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR! react@"^18.0.0" from the root project
npm ERR! Could not resolve dependency:
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! Conflicting peer dependency:
npm ERR! peer react@"^16.8 || ^17.0 || ^18.0"
npm ERR! node_modules/react
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.3.0
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.2.0" from the root project
could not resolve dependency: npm peer react@"^18.0.0" from @testing-library/react@13.2.0
새로 프로젝트를 세팅하든,
레퍼지터리에서 불러와서 세팅하든,
방법은 아래의 3단계로 진행 한다.
1. 일단 create-react-app으로 React 프로젝트 세팅
- 혹은 GitHub, GitLab에서 기존 프로젝트를 clone/pull 해온다.
npx create-react-app 폴더명
- npx create-react-app 은 최신버전의 react, react-dom 으로 세팅되므로, 아래에서 변경할 예정이다.
- git clone 해온 경우, package.json 에서 모듈간에 버전이 서로 안 맞을 수 있으므로, 아래에서 맞춰줄 예정이다.
2. 라이브러리 모듈 삭제 (없으면 패스)
- package-lock.json 파일 삭제
- node_modules 폴더 삭제
3. package.json 파일 수정
- react, react-dom 의 버전을 변경해준다.
- 중요!!!! React 18 미만의 버전은 test 라이브러리 버전도 낮춰주야 한다.
=> 예를 들어 React 17 버전의 경우, testing-library 13 버전은 호환되지 않으므로 12 버전으로 변경해주면 된다.
{
// ...
"dependencies": {
// ...
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^12.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
// ...
}
// ...
}
=> react, react-dom 버전만 변경하고, testing-library를 안 맞춰주면 아래의 에러가 노출되면서 설치가 안 될 수 있다.
could not resolve dependency: npm peer react@"^18.0.0" from @testing-library/react@13.2.0
Last Step: 마지막으로 모듈을 설치해준다.
npm install
이제 에러 없이 모듈들이 설치되고,
원하는 버전의 React, React-Dom 이 세팅된 프로젝트를 구동할 수 있을 것이다.
(혹은 그렇게 되길 바란다.)
혹시 React 18 버전에서 그 이하 버전으로 낮춘 경우,
ReactDOM.render 함수의 사용방식이 달라서 소스코드를 수정해 줘야 한다.(아래 글 참고)
[React] 리액트v18 버전 다운 에러 해결 방법 : Cannot find module 'react-dom/client'
'개발(Development) > React(리액트)' 카테고리의 다른 글
[React] 리액트 기초 동작 원리(Feat. Virtual DOM : 가상돔이란?) (0) | 2022.08.06 |
---|---|
[React] Toast-UI Editor/Viewer 유튜브 동영상 삽입/표시 방법 (0) | 2022.08.06 |
[React] Toast-UI Viewer 글자 크기, 행 간격, 마진 등 CSS 조정 방법 (0) | 2022.05.31 |
[React] Router v6: useNavigate() 파라미터 전달&취득 방법 - useLocation() (0) | 2022.05.28 |
[React] Router v6 리다이렉트 및 경로 이동 처리(새로고침X): 404에러 페이지 렌더링 활용 (0) | 2022.05.23 |
댓글