️🌋
ERROR. 'Slider' cannot be used as a JSX component.

· January 20, 2025 · 2 min read


☀️ 테스트 환경

  • node v20.16.0
  • yarn 1.22.22
  • react ^18.2.0

⛔ ERROR

어제까지는 잘 되던게 갑자기 안됨

  • yarn.lock 파일삭제하고 다시 yarn install 실행 후 build를 수행하면 아래와 같은 오류가 발생한다.
error TS2322: Type '{ children: Element[]; dots: boolean; infinite: boolean; speed: number; slidesToShow: number; slidesToScroll: number; autoplay: boolean; autoplaySpeed: number; centerMode: boolean; swipeToSlide: boolean; ... 5 more ...; ref: RefObject<...>; }' is not assignable to type 'Readonly<Settings>'.
  Types of property 'appendDots' are incompatible.
    Type '(dots: ReactNode) => JSX.Element' is not assignable to type '(dots: ReactNode) => Element'.
      Types of parameters 'dots' and 'dots' are incompatible.
        Type 'import("~~").ReactNode' is not assignable to type 'React.ReactNode'.
          Type 'bigint' is not assignable to type 'ReactNode'.

        <Slider ref={sliderRef} {...settings}>
error TS2786: 'Slider' cannot be used as a JSX component.
Its type 'typeof Slider' is not a valid JSX element type.
Types of construct signatures are incompatible.
Type 'new (props: Settings) => Slider' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
Property 'refs' is missing in type 'Slider' but required in type 'Component<any, any, any>'.

        <Slider ref={sliderRef} {...settings}>

❓ 왜

설지된 패키지(@types/react) 버전이 이상하다

  • 문제의 패키지 버전을 ^18.2.43으로 명시해놓고 사용하는데 yarn install 이후 생성된 yarn.lock 파일에는 19.0.1로 설치가 되었다.
// package.json

...
"devDependencies": {
  "@types/react": "^18.2.43",
...
// yarn.lock

...
"@types/react@*", "@types/react@>=16":
  version "19.0.1"
  resolved "https://~~~"
  integrity ~~~
  dependencies:
    csstype "^3.0.2"
...

하위 의존성 패키지 문제

  • package.json 에 명시되어있는 몇개의 패키지가 하위 의존성 패키지로 @types/react 의 버전을 19.0.1로 불러오고 있었다. 아래 두가지 패키지가 문제였다.
// package.json

...
"dependencies": {
  "@mui/material": "^5.15.0",        
},
"devDependencies": {
  "@types/react-slick": "^0.23.13" ,
...

✅ 해결

하위 패키지 버전 명시

  • 여러 패키지가 동일한 의존성을 가질 때 버전을 일관되게 유지할 수 있도록 resuolutions↗를 사용 할 수 있다.
// package.json

...
"resolutions": {
  "@types/react": "^18.2.43",
}

👋 마치며

별게 다 속을 썩인다.

@rundevelrun
똑바로 해, 넌 정말