[React] create-react-app 리액트 버전 변경 및 에러 처리 방법

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'