Toast ui editor 리액트 버전 에러

이번에 프로젝트를 진행하면서 글 작성 markdown이 필요했습니다. 

그래서 찾아본 결과 toast ui editor이 문서화도 잘되어 있고,

커스텀을 할수 있는 점, 디자인이 예쁜 점을 고려해서  toast ui editor 라이브러리를 사용하게 되었습니다. 

하지만

아래와 같이 설치하니깐 버전에러가 발생했습니다. 

 

자세히 살펴보면  toast-ui-editor라이브러리가 리액트 17.0.1까지 지원한다고 되어 있습니다.

그래서 터미널에 다음과 같이 입력 해줍니다.

npm install react@^17.0.1 react-dom@17.0.1

하지만 버전을 다운 그레이드 하면 또 다른 에러가 발생합니다.

 

리액트 버전 18에서는 위와 같이 ReactDOM을 import 하지만

버전 17에서는 client를 제거해줘야지만 에러가 발생하지 않습니다. 

그리고 코드도 조금 수정해줍니다.

리액트 18 / 리액트 17

끝인 줄 알았지만 또 다른 에러가 발생합니다.

@testing-library/react 관련해서도 버전 충돌이 생기는데

리액트의 버전이 바뀌면서 @testing-library/react의 버전도 다운그레이드

해주라는 오류입니다. 

아래 링크에 자세한 설명이 되어 있습니다.

https://stackoverflow.com/questions/71713405/cannot-find-module-react-dom-client-from-node-modules-testing-l ibrary-react

Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'

 

npm i -D @testing-library/react@release-12.x

위 코드를 터미널에서 실행해주면 toast ui editor 관련 버전 에러를 해결할 수 있습니다.