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. root 위치에 index.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
}
}
리액트 버전업이 되면서 아직 인터페이스 호환 측면에서 업데이트가 되지 않아서 발생한 것으로 추측됩니다.
Author And Source
이 문제에 관하여(React 18 + React query에서 QueryClientProvider에 IntrinsicAttributes 에러가 발생할 때 해결 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dkdlel102/Next.js-React-18-TS-React-query에서-QueryClientProvider에-IntrinsicAttributes-에러가-발생할-때-해결-방법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)