[REACT] Failed to compile. Module not found : Can't resolve 'react-router-dom'

* 이슈 상황 *

리액트에서 버튼을 클릭하면 페이지가 이동하도록 만들어주는데 compile 에러가 발생했다

(useNavigate를 사용해 이벤트를 설정 중)

 

※ 참고 : useNavigate란 ? 
리액트 라우터 v6에서 새롭게 추가된 hook이다 
useNavigate를 사용하면 JavaScript 함수 내 다른 페이지로 이동할 수 있다 
useNavigate는 주소 표시줄의 URL을 변경하지 않으며 페이지 이동만 수행한다 

 

Failed to compile. Module not found : Can't resolve 'react-router-dom'

 

 

* 해결 방법 * 

=> react-router-dom을 설치해준다 

yarn 명령어, npm 명령어 둘다 해봤는데 결국 npm으로 설치함

1), 2) 패스하셔도 되어요

 

1) yarn 설치

에러 속의 에러 ~~ 해결해주면 됨

 

yarn : 'yarn' 용어가 cmdle, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 

 

yarn 설치

npm install -g yarn

 

C:\Users\user\AppData\Roaming\npm\node_modules\yarn에 설치되었다는 걸 알 수 있다

yarn 설치 확인

 

버전 확인

yarn -v
yarn --version

 

 

2) yarn 환경변수 설정

고급 시스템 설정보기 > 고급 > 환경변수 선택 > 환경변수 > 시스템 변수의 Path 선택

검색 - 시스템 환경 변수 편집 들어가도 됨

 

환경 변수 편집 - 새로 만들기 - yarn 설치된 경로를 추가 - 확인

 

 

3) cmd로 react-router-dom 설치하기(yarn)

※VSCode의 터미널 설정이 powershell인 경우 설치되지 않는다
ctrl+shift+p를 눌러 Terminal: Select Default Profile [터미널: 기본 프로필 선택]  클릭
Command Prompt 클릭해 설정을 바꿔준다 
터미널 종료 후 재실행

 

> react-router-dom 설치

react-router-dom : 브라우저에서 사용되는 리액트 라우터

yarn add react-router-dom 실행

yarn add react-router-dom

 

=> 근데 에러가 나

설치 중 에러 발생

workbox-webpack-plugin@6.6.1: The engine "node" is incompatible with this module. Expected version ~ 
Found incompatible module

 

 

4) react-router-dom을 npm으로 다시 설치해본다(npm) 

npm install --save react-router-dom

--save : package.json의 dependencies 속성에 의존성 기록이 된다

 

> package.json에 react-router-dom이 되어있는지 확인가능하다

react-router-dom 확인 가능