React 18 + React query에서 QueryClientProvider에 IntrinsicAttributes 에러가 발생할 때 해결 방법

React 17과 React 18의 FunctionComponent의 인터페이스가 달라졌기 때문에 발생하는 에러입니다.

React 17에서의 Function Component 인터페이스

interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

React 18에서의 Function Component 인터페이스

interface FunctionComponent<P = {}> {
        (props: P, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

QueryClientProvider의 인터페이스가 React 17 기준으로 맞춰서 있기 때문에 발생합니다.

따라서, 이를 다시 React 17 기준으로 맞춰주면 됩니다.

1. src 폴더 안에 d.ts 파일 생성

2. 아래의 코드 삽입

import 'react'

declare module 'react' {
  export type FC<P = {}> = FunctionComponent<P>
  export interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null
    propTypes?: WeakValidationMap<P> | undefined
    contextTypes?: ValidationMap<any> | undefined
    defaultProps?: Partial<P> | undefined
    displayName?: string | undefined
  }
}

리액트 버전업이 되면서 아직 인터페이스 호환 측면에서 업데이트가 되지 않아서 발생한 것으로 추측됩니다.