Cannot read properties of undefined (reading ‘content’) 에러해결 - (ft. react-toastify)

24 Feb 2023 in Problem Solving on Problem Solving

🧶 Problem

개인 프로젝트 react-query 리팩토링 중 잘되던 react-toastify가 작동하다가 에러를 뱉어냈다.

그룹을 생성하거나 수정할 때는 toast가 잘 작동되는데 삭제할 때만 오류가 발생하였다. 로직의 다른 점이 하나 있다면 삭제는 중요하기에 확인 modal이 한 번 더 뜨는데 확인 modal을 클릭하면 toast가 작동되다가 에러가 발생하였다. 아마도 modal과 toast가 충돌하고 있는 것으로 파악했다.

🪄 Solution

React-toastify Github에서 해당 이슈를 검색해보니 똑같은 오류에 관한 이슈를 찾았다.

Uncaught TypeError: Cannot read properties of undefined (reading 'content') #858

이슈를 살펴보니 다음과 같은 해결책을 찾을 수 있었다.

 I was having the same error
 TypeError: Cannot read properties of undefined (reading 'content')

 I resolved it by adding a small delay in the notification appearance

eg-

const sendTransaction = () => {
    toast.promise(
        writeAsync,
      {
          pending: "Promise is pending",
        success: "Promise resolved 👌",
        error: "Promise rejected 🤯",
      },
      {
          position: toast.POSITION.BOTTOM_LEFT,
        delay: 100,
      }
    );
  };

💥 참고 방법

해당 방법을 나의 코드에 적용했다.

  const { mutate } = useMutation(
    (targetId: TargetId) => removeGroup(targetId),
    {
      onSuccess: () => {
        queryClient.invalidateQueries([queryKeys.groupsData]);
        toast.success('문장집 삭제완료', {
          position: 'top-center',
          autoClose: 300,
          delay: 100,
        });
      },
     ...
    }
  );
  return mutate;
};

에러없이 toast가 잘 작동되었다.

---

참고 🫧

react-toastify issues