[React] Plugin "react" was conflicted between "package.json

1. Error 발생

저번 주에 동미참을 끝내고, 오래간만에 노트북을 들고 카페에서 코딩을 하게됐다.

Project에 TypeScript 설치하고 코딩을 좀 하다가, 저번 주 수요일에 자택에 있는 데스크탑으로

해당 프로젝트를 commit 했던 기억이 갑자기 떠올라서 평소에 했던 것처럼 git pull 하고

 

npm start 입력해서 Project를 실행했는데 생전 처음보는 에러가 내 눈 앞에 보였다.

Plugin "react" was conflicted between "package.json

 

번역기를 돌려보니 plugin "react"가 "package.json"에서 충돌했다는 내용이다.

일단 이를 해결하기 위해서 구글링을 해보니 아래와 같은 해결책을 확인할 수 있었다.

1. 'package.json' 다시 저장하기

2. Terminal에서 Project 경로 다시 설정하기

---

2. Error 해결 과정

① 'package.json' 다시 저장하기

 

내가 참고한 게시글은 총 두개인데, 두 게시글 모두 'package.json'을 다시 저장하면

에러가 잠시동안만 사라진다고 했었다.

 

에러가 완전히 사라지는 것도 아니고, 잠시동안만 사라진다는 것은

내가 코드를 수정할 때마다 일일히 package.json을 다시 저장을 해야한다는 것이다.

별로 좋은 방법은 아닌 것 같기에 이 방법은 별도로 시도하지는 않았다.

---

② Terminal에서 Project 경로 다시 설정하기

 

두 번째 방법, Project 경로를 다시 설정하는 방법을 시도해봤다.

VSCode의 Terminal을 다시 열어서 아래 순서대로 입력해서 프로젝트 경로를 설정하고

npm start 입력한 후 프로젝트를 재실행하니 에러가 사라졌다.

 

프로젝트 경로 접속 법만 살짝 바꾼걸로 에러가 해결되기는 했는데 약간 찝찝하기는 하다.

프로젝트 패키지 이름을 수정한 적이 있었다면 이러지도 않을텐데

그냥 Terminal에서 접근 법만 바꾼 걸로 이렇게까지 달라질 줄은 몰랐다...

# Before
cd Exam/masterclass

# After
cd Exam
cd masterclass

---

③ node_modules, package.json 삭제 후 재설치

 

위의 방법으로 해결된 줄 알았는데 코드를 수정하고 저장하니 에러가 다시 발생했다.

node_modules과 package.json을 삭제하고 'npm install' 입력해서 재설치하면 해결된다고 한다.

다만 삭제하는 과정에서 뭔가를 잘못했는 지 재설치가 안된다.

 

해결 방법을 찾는 시간이 생각보다 오래 걸릴 것 같고, 작업량이 많은 편은 아니기에

그냥 프로젝트를 폭파시키고 처음부터 다시 설치하기로 했다.

 

npx create-react-app masterclass --template typescript

 

기존에 작성한 코드들은 백업해두고, 이외 나머지는 전부 삭제하고

create-react-app으로 React Project를 처음부터 다시 만들었다. (TypeScript도 같이 설치 진행)

 

이번 일에서 npm과 관련된 파일은 함부로 삭제하는 것이 아니다. 라는 교훈을 얻었다.

슈발...