Error when using typings from 3rd party packages

Stencil
1

I’m using Stencil JS as UI web components for the project I work for (Vue). Besides the challenges, Stencil is handling well.

I build Stencil and import it as npm package. Basically this https://stenciljs.com/docs/vue

But I’m facing a special situation here: every time I decide to use 3rd party typings.

Example:

Swiper still doesn’t have built-in typings, so I need to install @types/swiper as devDependency

import Swiper, { SwiperOptions } from 'swiper'; 
// SwiperOptions is just a interface declaration

// [...]

export interface ScrollerBreakpointsConfig extends SwiperOptions {
    [index: number]: SwiperOptions;
}

@Component({
// [...]
})
export class ExampleComponent {
  // [...]
  @Prop() breakpoints: Maybe<ScrollerBreakpointsConfig[]> = null;
 
 // [...]
}

So when I build the project, the generated typings for this component is something like:

dist/types/example-component/exampe-component.d.ts

import { ... } from '../../stencil-public-runtime';
import { SwiperOptions } from 'swiper';

// [....]
export interface ScrollerBreakpointsConfig extends SwiperOptions {
    [index: number]: SwiperOptions;
}

export declare class ExampleComponent {
// [...]
}

Stencil build process works as expected. But when to use Stencil component in my Vue Project, I get error when I build the Vue project.

 Could not find a declaration file for module 'swiper'. '/xxx/xxx/xxx/xxx/node_modules/swiper/js/swiper.js' implicitly has an 'any' type.
  Try `npm install @types/swiper` if it exists or add a new declaration (.d.ts) file containing `declare module 'swiper';`
    1 | import { ... } from '../../stencil-public-runtime';
  > 2 | import { SwiperOptions } from 'swiper';

This is easily solved by moving @types/swiper from Stencil devDependency to dependencies. But for me it does not make sense use such package as dependency.

I’m aware Stencil is doing his job and doing the necessary imports for definitions files. And if I decide to rely on a 3rd party module I need to ensure that it will load correctly. But imo, typings are merely used for development purposes, so I should kept apart from package dependencies.

Does any one faced this situation and solved it in another way?

Of course I could write my own typings to solve, but I would like to rely on third party typings for my Stencil components.

1 Like