Reputation: 1392
I am using react-responsive-carousel
"react-responsive-carousel": "3.2.21"
to show a list of images with typescript in NEXT js app.
<Carousel
showStatus={false}
showThumbs={false}
autoPlay={true}
infiniteLoop={true}
swipeable={false}
emulateTouch={true}
animationHandler="fade"
transitionTime={5000}
>
I am referring to this discussion, that recommends adding a *.d.ts
file.
declare module 'react-responsive-carousel/lib/js/components/Carousel/index' {
import { Carousel } from 'react-responsive-carousel';
export = Carousel;
}
Here is my tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.d.ts"],
"exclude": ["node_modules"],
"extends": "./tsconfig.paths.json"
}
Here is my folder structure
components
.
├── Icons
│ ├── ASCIcon.tsx
│ ├── ArrowLeft.tsx
│ ├── ArrowRight.tsx
│ ├── DESCIcon.tsx
│ ├── EyeIcon.tsx
│ └── PongCircle.tsx
├── UI
│ ├── Menubar.tsx
│ └── Navbar.tsx
└── types
├── CarouselComponent.*.d.ts
└── index.ts
It works locally, but it breaks on prod.
37 | swipeable={false}
38 | emulateTouch={true}
> 39 | animationHandler="fade"
| ^
40 | transitionTime={5000}
41 | >
ype error: Type '{ children: Element[]; showStatus: false; showThumbs: false; autoPlay: true; infiniteLoop: true; swipeable: false; emulateTouch: true; animationHandler: string; transitionTime: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Carousel> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, never> & Partial<...> & Partial<...>'.
Property 'animationHandler' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Carousel> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, never> & Partial<...> & Partial<...>'.
Upvotes: 2
Views: 1732