naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
https://naver.github.io/egjs-flicking/
MIT License
2.74k stars 128 forks source link

Type 'AutoPlay[]' is not assignable to type 'Plugin[]' #668

Open tinkerbell93 opened 2 years ago

tinkerbell93 commented 2 years ago

Description

안녕하세요. 넥스트, 타입스크립트 사용하여 autoplay를 구현중에 있는데요. autoplay는 동작을 하지만 하단과 같은 타입에러가 나서 문의드립니다. 제가 어느 부분을 놓치고 있는지 확인 가능 하실까요? 감사합니다.

Type 'AutoPlay[]' is not assignable to type 'Plugin[]'.
  Type 'AutoPlay' is not assignable to type 'Plugin'.
    Types of property 'init' are incompatible.
      Type '(flicking: import("/node_modules/@egjs/flicking/declaration/Flicking").default) => void' is not assignable to type '(flicking: import("/node_modules/@egjs/react-flicking/node_modules/@egjs/flicking/declaration/Flicking").default) => void'.
        Types of parameters 'flicking' and 'flicking' are incompatible.
          Type 'import("/node_modules/@egjs/react-flicking/node_modules/@egjs/flicking/declaration/Flicking").default' is not assignable to type 'import("/node_modules/@egjs/flicking/declaration/Flicking").default'.
            Types have separate declarations of a private property '_viewport'.ts(2322)
types.d.ts(7, 5): The expected type comes from property 'plugins' which is declared here on type 'IntrinsicAttributes & Partial<FlickingProps & FlickingOptions> & { theme?: Theme | undefined; } & { ...; } & { ...; }'

Steps to check or reproduce

autoplay는 해당 리액트 문서 참고했습니다.

    "next": "^12.1.4",
    "@egjs/flicking-plugins": "^4.3.0",
    "@egjs/react-flicking": "^4.6.2",
import Flicking from '@egjs/react-flicking';
import { AutoPlay } from '@egjs/flicking-plugins';

const plugins = [
  new AutoPlay({
    duration: 2000,
    direction: 'NEXT',
    stopOnHover: false,
  }),
];

export const ControllerSlide = () => {
  return (
    <Flicking
      align="center"
      circular
      plugins={plugins}
      hideBeforeInit
      duration={2000}
      preventClickOnDrag={false}
    >
      ...
   </Flicking>
  )
}
WoodNeck commented 2 years ago

@tinkerbell93님 안녕하세요

에러 메시지만 확인해봤을 때 @egjs/react-flicking 내에 node_modules 항목이 있고, 그걸 참조하고 있는 것으로 보이는데요 /node_modules/@egjs/react-flicking/node_modules/@egjs/flicking/declaration/Flicking 만약 그런 경우라면 react-flicking 내에 있는 node_modules 폴더를 삭제해보시면 좋을 것 같습니다.

일반적인 경우라면 다음과 같이 설치되는 것이 정상입니다 image

tinkerbell93 commented 2 years ago

@WoodNeck 감사합니다 해결되었습니다. 👍