[에러 일지] toast ui 리액트 버전 충돌

❗️ 문제

toast ui를 install 하려하니 해당 Error가 발생하였다.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: stack-over-flow-clone@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from @toast-ui/react-editor@3.2.2
npm ERR! node_modules/@toast-ui/react-editor
npm ERR!   @toast-ui/react-editor@"^3.2.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/~~~~~/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/~~~~~/.npm/_logs/2022-10-27T04_36_51_792Z-debug-0.log

리액트 버전은 18.2.0인데, toast ui가 지원하는 리액트 버전이 17.0.1라서 버전 충돌이 일어나는 것으로 보였다.

🔎 시도 1 (실패)

react 버전을 17.0.1로 다운그레이드하고자 했다.

npm install react@^17.0.1 react-dom@17.0.1 --legacy-peer-deps

그러나 이 방법을 진행할 시 react-dom/client 모듈을 찾을 수 없다는 에러를 보게 된다...
이전 방식의 모듈로 DOM을 렌더링해주면 해결된다는데 너무 파일 뜯어고칠 게 많아질 것 같아서 포기 ㅜㅜ

🔎 시도 2 (성공)

rm -rf node_modules             // node_module 삭제
rm -rf package-lock.json        // package-lock.json 삭제
npm cache clean --force         // 캐시 삭제

npm install --force             // 충돌 우회
or
npm install --legacy-peer-deps  // 충돌 무시

npm install로 설치하려고 할 시, 같은 에러를 보게 되기 때문에 충돌을 우회하거나 무시하는 명령어를 사용해야 했다.

npm install --legacy-peer-deps을 통해 install을 시도해보니 install 자체는 잘 되었으나, 갑자기 새로운 에러가 뜨기 시작했다.

[eslint] Cannot find module 'prettier'
Require stack:
- /Users/~~~생략~~~/client/node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js
- /Users/~~~생략~~~/lient/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
Occurred while linting /Users/~~~생략~~~/client/src/index.js:1
Rule: "prettier/prettier"

갑자기 잘 쓰고 있던 prettier 모듈을 찾을 수가 없다는 에러....

npm install --save-dev prettier

// --save-dev: package.json의 devDependencies 항목에 모듈 및 버전을 저장

와 드뎌 해결했다....

✨ 해결

// node_module 삭제
rm -rf node_modules

// package-lock.json 삭제
rm -rf package-lock.json 

// 캐시 삭제
npm cache clean --force

// package 설치
npm install --force // 충돌 우회
or
npm install --legacy-peer-deps // 충돌 무시

// prettier 설치
npm install --save-dev prettier --legacy-peer-deps

까지 입력하고 vscode 종료 후 재실행!!

---

❗️❗️❗️❗️❗️

위 방법대로 해결하였었으나!!!

팀원 누군가 새로운 package를 설치하여 npm install를 해야할 때마다,
다시 같은 에러가 반복된다는 사실을 깨달았다.

사실상 해결이 아니고 임시 방책이었던 것이다...🥲

toast ui 개발자분들의 github에 찾아가보니 당장 toast ui의 react 버전을 업데이트할 계획이 없다는 것을 확인하였고, 결국 react-md-editor 라는 에디터로 바꾸기로 하였다.

억지로 얼레벌레 고쳐서 쓰는 것보다, 빠르게 다른 라이브러리를 찾는 것이 더 좋은 해결책이 될 수 있다는 것을 깨달았다...!

---