export 'Pagination' (imported as 'Pagination') was not found in 'swiper' (possible exports: Swiper, default)

Question

I wanted to add the Pagination from swiper.
The import statement I used is import { Pagination } from "swiper";

My configuration:

The error i`m getting is :

I have seen at multiple places that its working fine but not sure why I`m encountering this issue.

Also on this stackflow article it say the same import statement as of aforementioned.

Answer 1

Create React App doesn't support pure ESM packages yet. It is still possible to use Swiper (7.2.0+) with it.

In this case we need to use direct file imports:

// Core modules imports are same as usual
import { Navigation, Pagination } from 'swiper/modules';
// Direct React component imports
import { Swiper, SwiperSlide } from 'swiper/swiper-react.mjs';

// Styles must use direct files imports
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module

For reference : https://swiperjs.com/react#usage-with-create-react-app

Seems like earlier pagination would work using import { Pagination } from "swiper";.
But now its import { Pagination } from 'swiper/modules';
Just by adding /modules in my import statement fixed the issue.