Could not find a declaration file for module 'swiper'

[ben4d85]

Check that this is really a bug

• [X] I confirm

Reproduction link

n/a

Bug description

Fresh installation of Vite with React and TypeScript using Swiper version 9.3.2. I am getting the following error:

Could not find a declaration file for module 'swiper'. 

'/.../node_modules/swiper/swiper.esm.js' implicitly has an 'any' type.

There are types at '/.../node_modules/swiper/swiper.d.ts', but this result could not be resolved when respecting package.json "exports".

The 'swiper' library may need to update its package.json or typings.ts

Here's my code:

// Swiper modules
import { Keyboard } from "swiper"; // This is the problem

// Swiper React components
import { Swiper, SwiperSlide, SwiperRef, SwiperClass } from "swiper/react"; // This is fine

// Swiper styles
import "swiper/css"; // This is fine

Expected Behavior

Types should just work without error.

Actual Behavior

Type error.

Swiper version

9.3.2

Platform/Target and Browser Versions

n/a

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

[Cryptoplasm]

I've got the same issue. Did you manage to find a way to fix it?

[azeranex]

I've got the same issue. Did you manage to find a way to fix it?

Please check this PR: https://github.com/nolimits4web/swiper/pull/6626 You need to change exports in swiperjs's package.json. I tried and it's working fine now.

[salvadoregunacci]

Solution:

1. Create a swiper.d.ts file in your application folder
2. Inside the file, place the following line of code: declare module 'swiper'

[paras1729kori]

Thank you so much @salvadoregunacci for the solution. But how should I fix the bug when deploying a website ? I am getting a build error of the same on vercel.

[salvadoregunacci]

@paras1729kori You can try this solution: in your tsconfig file add the following code

"compilerOptions": {
"noImplicitAny": false
}

P.S it's not the best option, but it might come in handy

[paras1729kori]

Thanks a bunch @salvadoregunacci. It worked.

[qp0kycHuk]

It helps for me: "strict": true -> "strict": false

in your tsconfig.json

[ilia-os]

Got same error today while migrating nextjs project to esm. tsconfig moduleResolution = bundler

Im just copy-pasted declaraions from swiper.d.ts into my project's global.d.ts

declare module 'swiper' {
  import Swiper from './types/swiper-class'
  import { SwiperOptions } from './types/swiper-options'
  import { SwiperModule } from './types/shared'

  declare const A11y: SwiperModule
  declare const Autoplay: SwiperModule
  declare const Controller: SwiperModule
  declare const EffectCoverflow: SwiperModule
  declare const EffectCube: SwiperModule
  declare const EffectFade: SwiperModule
  declare const EffectFlip: SwiperModule
  declare const EffectCreative: SwiperModule
  declare const EffectCards: SwiperModule
  declare const HashNavigation: SwiperModule
  declare const History: SwiperModule
  declare const Keyboard: SwiperModule
  declare const Lazy: SwiperModule
  declare const Mousewheel: SwiperModule
  declare const Navigation: SwiperModule
  declare const Pagination: SwiperModule
  declare const Parallax: SwiperModule
  declare const Scrollbar: SwiperModule
  declare const Thumbs: SwiperModule
  declare const Virtual: SwiperModule
  declare const Zoom: SwiperModule
  declare const FreeMode: SwiperModule
  declare const Grid: SwiperModule
  declare const Manipulation: SwiperModule

  export default Swiper
  export {
    Swiper,
    SwiperOptions,
    A11y,
    Autoplay,
    Controller,
    EffectCoverflow,
    EffectCube,
    EffectFade,
    EffectFlip,
    EffectCreative,
    EffectCards,
    HashNavigation,
    History,
    Keyboard,
    Lazy,
    Mousewheel,
    Navigation,
    Pagination,
    Parallax,
    Scrollbar,
    Thumbs,
    Virtual,
    Zoom,
    FreeMode,
    Grid,
    Manipulation,
  }
}

[Ahl-am]

what worked for me in Next.js 13 was using swiper instead of swiper/module that was written in the documentation. import { Navigation, Pagination, Scrollbar, A11y } from "swiper";

[alipalvane]

if use next.js, you can use this: import { Navigation, Pagination } from 'swiper';