Svelte - TinyMce images_upload_handler Error - tinymce cannot read properties of undefined (reading 'then')

아마 Svelte에서만 발생하는 문제로 보인다. 

images_upload_handler 를 등록하면 아래와 같은 오류와 함께 진행이 되지 않는다.

tinymce cannot read properties of undefined (reading 'then')

TinyMCE를 통해 이미지관련된 이벤트를 효과적으로 처리하기 위해서는 별도의 평션을 만들어 이용해야하는데, 이부분에서 분명 백엔드에서 값을 가져왔지만 정상적으로 보이지 않는 에러가 발생한다.

console.log로 정상적으로 이미지 경로 회신

하지만 표시가 되어야 할 source 경로에서는 아래 처럼 read 오류가 발생한다.

 

 

처음에는 브라우저의 CORS 문제로 생각하여 브라우저를 고쳐보았다.

Mac - Chrome CORS Disable 실행 (asecurity.dev)

Mac - Chrome CORS Disable 실행

 

하지만 정상적으로 진행이 되지 않아, TinyMCE를 보다 정밀하게 테스트하기로 하였다.

images_upload_handler는 총 3개의 function을 사용하는데, blobInfo의 현재 TinyMCE에 등록된 파일에 대한 정보, 그리고 업로드 성공시 사용하는 success 평션, 실패시 사용하는 failure가 있다.

즉 이미지 업로드가 성공하면, success에 해당 주소값을 반환받아 Tiny source에 업데이트하는 구조이기 때문에 success에 테스트용도의 값을 입력하여 테스트해보기로 하였다.

이러게 테스트를 진행해본 결과 값 자체의 리턴이 되지 않는 것을 확인하였다.

즉 버전에 오류가 있는 문제로 보였다.

 

테스트시 사용했던 코드

tinymce.init({
	...
	images_upload_handler: function (blobInfo, success, failure) {
		success("http://google.com");
	},
	...
});

 

하여 과거 테스트했던 버전으로 다시금 테스트를 진행하여

정상적으로 이용이 가능한 버전을 확인하였는데, 현재 2022년5월 기준으로  1.0.0 버전에서 문제가 발생하고, 0.1.2 버전은 해당 문제가 발생하지 않는다.

 "@tinymce/tinymce-svelte": "^0.1.2"

위 버전으로 테스트해본 결과 정상적으로 이미지를 업로드, 표현이 가능하다.

이 오류로 아침부터 밤까지 머리 쥐뜯으며 고통받은 생각을 하니 속이 후련하다. 

하루빨리 해결된 버전이 나오기를 기대한다...