Missing types in Swiper component because of a missing import in swiper-react.d.ts

[josedasilva123]

Check that this is really a bug

• I confirm

Reproduction link

https://github.com/josedasilva123/yourself-website/blob/main/src/components/sections/ImageSliderSection/ImageSliderSection.tsx

https://stackblitz.com/edit/stackblitz-starters-qtpgv7?file=src%2FApp.tsx (you can see the type error in that link)

Bug description

Swiper component type is not working because, some imports in swiper-react.d.ts are wrong.

Expected Behavior

import type { Swiper as SwiperClass } from './types/index';
import type { SwiperOptions } from './types/swiper-options'`

Should be like this, this small fix solves the issue.

Another way to solve the issue that i found was to remove the d.ts from every single import (they are not necessary) and when I did that, it also solves the issue without the needing of change any import.

// @ts-nocheck
export * from './shared';
export { default as Swiper } from './swiper-class';
export * from './swiper-events';
export * from './swiper-options';
export * from './modules/public-api';

(Like this, but, there is also some imports that are breaking because of the d.ts so I made in every d.ts file ) and every start working perfectly.

I don't know if there is a better way to fix it, but this is working

Actual Behavior

import type { SwiperOptions, Swiper as SwiperClass } from '../types/index.d.ts';

There is no SwiperOptions in index file, and also, d.ts is not necessary in the importing path. For some reason, the * export are not working :c

Swiper version

10.0.4

Platform/Target and Browser Versions

The problem in not in a browser is VSCode, because is a TS problem

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

[nolimits4web]

SwiperOptions is definitely there in types/index:

export * from './swiper-options.d.ts';

Package types are fully compliant with Node 16+ import syntax https://arethetypeswrong.github.io/?p=swiper%4010.0.4

[josedasilva123]

If everything is all right, so why we have this TS error both in my enviroment and in Stackblitz (that sure is not my env)

Type '{ children: Element; pagination: boolean; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<SwiperRef> & SwiperProps'.
  Property 'pagination' does not exist on type 'IntrinsicAttributes & RefAttributes<SwiperRef> & SwiperProps'

And, when I do the changes I told u in this thread types start working normally?

[nolimits4web]

https://www.typescriptlang.org/tsconfig#moduleResolution

[yqbk]

I can confirm - build fails on import of SwiperOptions

I use Next.js

Error:

Type error: Module '"swiper/types"' has no exported member 'SwiperOptions'.

   5 | import { Swiper, SwiperSlide } from 'swiper/react'
   6 | import { Navigation, Pagination, Autoplay } from 'swiper/modules'
>  7 | import { type SwiperOptions } from 'swiper/types'

My tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/_document.tsx"],
  "exclude": ["node_modules"]
}

@nolimits4web are you sure ticket should be closed?

[nolimits4web]

moduleResolution should be set to nodenext

[josedasilva123]

Dude, I love ur slider and this lib,

But I already tried "node16" and "nodenext".

The issue keep happing to me, both in my env and in Stackblitz.

And

In node16 and nodenext there is another error, accusing that there are some CommonJS modules also.

The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("swiper/react")' call instead.
  To convert this file to an ECMAScript module, add the field `"type": "module"` to 'stackblitz:/package.json'.

Edit: type module in package.json json solve this error, but still, types are missing in Swiper component

I update Stackblitz URL so u can see what's happening. Just take a look
https://stackblitz.com/edit/stackblitz-starters-qtpgv7?file=src%2FApp.tsx

By the way, this example is in React, but my project where I found the issue in the first time it's also in NextJS

and

If you just remove the d.ts from the paths, everything goes back to normal. Without needing to change moduleResolution in tsconfig.

[Ulisseus]

I can confirm that this problem exists. I'm updating an old react app which was using 8.xx version of Slider, and I've got the exact same error Property 'pagination' does not exist on type 'IntrinsicAttributes & RefAttributes<SwiperRef> & SwiperProps' after installing the latest version of Slider.

My tsconfig

    "compilerOptions": {
        "baseUrl": "./src",
        "target": "es6",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "noFallthroughCasesInSwitch": true
    },
    "include": ["src"],
    "exclude": ["node_modules"]
}

I've tried different module resolution settings, the same error persists. In the end I've decided that the latest 9.x version is good enough already.

[yqbk]

@nolimits4web seems like the problem is not resolved :/