프로젝트를 진행하는 도중 WYSIWYG 에디터가 필요하여 찾아 보다 Toast UI에 내장된 TUI Editor를 찾게 되었다. 당시 프로젝트에서는 React 18 버전에서 작업 하고 있었고 마침 React 에서 사용가능 하도록 별도의 컴포넌트 라이브러리를 제공 해주고 있어 해당 에디터를 했다.

하지만 실제 설치 과정에서 프로젝트에 사용한 React 버전과 충동 오류가 발생했다…

https://prod-files-secure.s3.us-west-2.amazonaws.com/b6048a4c-daa4-4f8d-a769-2b62c05c47a2/1eace7ef-b06d-40d1-be52-fbc45dea7f27/Untitled.png

실제 라이브러리의 package.json을 확인해보니 React 의존성이 17 버전으로 설정되어 있다.

https://prod-files-secure.s3.us-west-2.amazonaws.com/b6048a4c-daa4-4f8d-a769-2b62c05c47a2/1e1df010-ca18-4d3a-8153-06f6193abc25/Untitled.png

처음에는 해당 라이브러리를 fork하여 의존성을 변경하고 수정된 라이브러리를 사용하려고 했으나 다른 해결책이 없을까 찾아보다 package.jsonoverrides 기능을 활용해 라이브러리의 명시된 의존성을 강제로 변경할 수 있는 옵셥을 찾았다. 해당 방법을 적용 후 다시 설치시 에디터가 잘 적용이 됐다.

"overrides": {
	"@toast-ui/react-editor": {
		"react": "^18"
	}
},

https://prod-files-secure.s3.us-west-2.amazonaws.com/b6048a4c-daa4-4f8d-a769-2b62c05c47a2/4cddcbc5-cbeb-4638-85d7-19de89f12b1a/Untitled.png