wick3d
wick3d

Reputation: 1392

How to include *.d.ts file in tsconfig?

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

Answers (0)

Related Questions