<ErrorBoundary> fallback 타입 에러: Type '({ error, resetErrorBoundary }: FallbackProps) => JSX.Element' is not assignable to type 'ReactElement<unknown, string | FunctionComponent<{}> | typeof Component>'.ts(2322)

문제 발생

react-error-boundary를 설치한 뒤 <ErrorBoundary> 컴포넌트에 fallback 함수를 props로 전달하던 중 발생한 문제입니다.

fallback 함수 globalErrorFallback을 별도로 만들어 props로 전달하려는데 다음과 같은 에러가 발생했습니다.

에러 코드 화면

Type '({ error, resetErrorBoundary }: FallbackProps) => JSX.Element' is not assignable to type 'ReactElement<unknown, string | FunctionComponent<{}> | typeof Component>'.ts(2322)

 

 

그래서 다음과 같이 타입 별칭으로 Fallback 이라는 타입을 지정했지만(ㅋㅋ..) 에러는 변함 없었습니다.

type Fallback = ReactElement<unknown, string | FunctionComponent<{}> | typeof Component>;

 

 

fallback props의 타입이 선언된 types.d.ts 파일로 이동해보니 fallback은 다음과 같은 타입이어야 했습니다.

export type ErrorBoundaryPropsWithFallback = ErrorBoundarySharedProps & {
    fallback: ReactElement<unknown, string | FunctionComponent | typeof Component> | null ;
    FallbackComponent?: never;
    fallbackRender?: never;
};

 

 

위와 동일하게도 해봤지만 변화 없었습니다.

또, types.d.ts의 fallback 타입에 union으로 globalErrorFallback의 타입을 포함시켜 일시적으로 에러 자체를 없애봤습니다.

export type ErrorBoundaryPropsWithFallback = ErrorBoundarySharedProps & {
    fallback: ReactElement<unknown, string | FunctionComponent | typeof Component> | null | {({ error, resetErrorBoundary }: FallbackProps): JSX.Element};
    FallbackComponent?: never;
    fallbackRender?: never;
};

 

하지만 오류 발생 시 콘솔에 다음과 같은 에러가 나타나는 걸 봐선 정상적인 fallback으로 인식되지 않는 것 같습니다.

 

에러 콘솔 화면

console.js:213 react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop

 

 

 

원인

react-error-boundary 라이브러리를 사용할 경우 fallback props명은 FallbackComponent 입니다...

 

class형으로 도전하다가 포기하고 react-error-boundary 설치해놓곤 props를 그대로 두고 있었습니다.

 

 

 

문제 해결

해결이라기도 웃기지만, 코드를 다음과 같이 바꿨습니다.

<GlobalErrorBoundary FallbackComponent={GlobalErrorFallback}>

 

fallback 컴포넌트명도 CamelCase로 수정했습니다.