msw 에러 `serializeResponse.ts:14 Uncaught (in promise)14 TypeError: Failed to execute 'text' on 'Response'`

거의 5시간을 찾아 헤맸던 msw 에러..

에러 메시지

serializeResponse.ts:14 Uncaught (in promise) TypeError: Failed to execute 'text' on 'Response': body stream already read at serializeResponse (serializeResponse.ts:14:26) at Emitter.<anonymous> (createRequestListener.ts:79:25) at Emitter.onceListener (Emitter.js:40:22) at Emitter.js:75:22 at Array.forEach (<anonymous>) at Emitter.emit (Emitter.js:74:19) at source.emit (pipeEvents.ts:19:20) at createResponseListener.ts:32:23 at ServiceWorkerContainer.<anonymous> (setupWorker.ts:93:17)

msw 로 api mocking 을 구현하던 중, 위와 같은 에러가 발생했다. 

다른 페이지에서는 에러 없이 모두 정상 동작하였으나 rtk-query를 두번 호출한 컴포넌트에서 해당 에러가 발생했다. 

function Example() {
  const { data } = useGetDataQuery();
  const { data2 } = useGetData2Query();
  
  return (<div>{data}</div>)
}

이렇게 2번의 rtk-query 코드를 연달아 사용했을 때 에러가 발생했다. 

때문에 연관된 해결방법을 찾고자 했으나 못 찾았고...

결국 찾은 해결 방법은..

해결방법

🔥💡
v1.2.3 으로 업그레이드 ( from v1.2.2 )

해결과정

msw 깃허브의 issue 해당 에러메시지를 검색하면 이렇게 close 된 이슈로 존재한다. 

이전의 이슈사항과 동일한 문제라는 댓글을 따라 #1640 이슈로 이동하자.

동일한 에러메시지로 #1640 이슈 또한 close 되었음을 확인할 수 있다. 

버전을 낮추라는 수 많은 댓글들..

1.2.2 버전업이 6월 9일, 그로부터 일주일 간격으로 에러가 발생했기에 1.2.2 버전이 최신버전이었고 버전을 낮추면 해결되는 문제였다. 

23년 7월 23일 v1.2.3으로 한 차례 버전업 되어, 이 이슈의 댓글을 따라 버전만 업그레이드 혹은 다운그레이드 해주었으면 쉽게 해결되었을 이슈

학습 포인트

지난 프로젝트에서 특정 오류를 해결하기 위해 패키지의 버전업을 임의로 진행했었다. 

사내 템플릿을 활용하여 진행하는 프로젝트였고, 여러명이 협업을 통해 진행했기에 package 버전과 설정을 일관되게 진행했어야 했는데, 임의로 패키지 버전을 업그레이드 하면서 다른 사람들에게 피해를 끼칠뻔 했었다. 

이때 팀원들이 함께 사용하는 공통 파일에 대해서는 수정을 하면 안되겠다는 생각을 했고, 이 생각이 굳어져 근본적인 문제 해결을 위해 버전업이 필요한 상황에서도 이를 받아들이지 못하고 다른 해결방법을 찾느라 리소스를 낭비했다. 

공통 파일이나 설정을 변경하더라도 꼭 필요한 부분이라면 팀원들과 충분히 내용을 공유하고 협의를 거치고 수정하면 된다. 

 

고정관념에 사로잡히지 않도록 주의하자.

오답 코드는 존재해도 정답 코드는 존재하지 않는다.

 

추가로 위의 v1.2.2와 v1.2.3을 확인해보면 #1622 pr 로 인해 해당 에러가 발생했고, 이를 해결하기 위해 #1622에 작업이 진행되었음을 확인할 수 있다.