Uncaught TypeError: Cannot add property current, object is not extensible (feat. forwardRef)

문제점

이전의 PR들을 모두 merge하고,

/@me 에 접속하였더니 에러가 뜬다.

오류의 원인을 찾아보니 useGetFriendList.tsx 부분이 문제였다.

import { useQuery } from "@tanstack/react-query";
import friendApi from "@api/friend";

const useGetFriendList = (options: any = {}) => {
  const { data, isSuccess } = useQuery(
    ["friendList"],
    friendApi.getAll,
    options
  );
  return { data: data?.data.data, isSuccess };
};

export default useGetFriendList;

여기서 return 부분을 return { data: [], isSuccess } 와 같이 data를 특정 값으로 지정해서 주면 에러가 발생하지 않는다.

 

오류에선 데이터가 extensible하지 않다고 하는데

let d = data?.data.data ?? [];
console.log(1, d, Object.isExtensible(d));

콘솔을 찍어 확인해보면, 이건 true로 뜬다.

 

 

---

4/4 (화)

받아오는 데이터의 문제가 아니었다.

BigSearchInputBox 컴포넌트에서 SearchInput 컴포넌트를 주석처리하니까 에러 없이 잘 돌아간다.

 

해결법

BigSearchInputBox.tsx 에서 forwardRef를 사용했을 때 props를 작성하지 않아서 발생한 문제였다. 이전에 ref 부분에서 타입에러가 발생해서 ref={ref as Ref<HTMLInputElement>} 를 붙여주어서 해결했었는데, props를 작성해주니까 해당 타입에러도 발생하지 않아서 as Ref<HTMLInputElement> 부분도 지웠다.

before

import { forwardRef, Ref } from "react";
import styled from "styled-components";
import SearchInput from "../Input/SearchInput";

const BigSearchInputBox = forwardRef<HTMLInputElement>((**ref**) => {
  return (
    <InputContainer>
      <SearchInput size="m" ref={ref **as Ref<HTMLInputElement>**} />
    </InputContainer>
  );
});

const InputContainer = styled.div`
  margin-top: 16px;
  margin-bottom: 8px;
`;

export default BigSearchInputBox;

after

// BigSearchInputBox.tsx

import { forwardRef } from "react";
import styled from "styled-components";
import SearchInput from "../Input/SearchInput";

const BigSearchInputBox = forwardRef<HTMLInputElement>((**_, ref**) => {
  return (
    <InputContainer>
      <SearchInput size="m" ref={ref} />
    </InputContainer>
  );
});

const InputContainer = styled.div`
  margin-top: 16px;
  margin-bottom: 8px;
`;

export default BigSearchInputBox;

 

Recap

forwardRef를 사용할 때에는 파라미터에 (props, ref) 두 개를 꼭 잘 작성해주자!