相关文章推荐

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • 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
  • I've got the same issue. Did you manage to find a way to fix it?

    Please check this PR: #6626
    You need to change exports in swiperjs's package.json. I tried and it's working fine now.

  • Create a swiper.d.ts file in your application folder
  • Inside the file, place the following line of code:
    declare module 'swiper'
  • AddielQuintero, dm26-dev, simplyratl, lolifmaster, Mustafa-Zahedi, abdulisabdul, Nabarajrai, MiladSadeghi, lambldrs, Juliet-cyborg, and 2 more reacted with thumbs up emoji imikh1991 and jhonatan-front reacted with hooray emoji All reactions 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

     
    推荐文章