0

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

My configuration:

enter image description here

The error i`m getting is : enter image description here

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.

Lakshay Rohilla
  • 1,654
  • 6
  • 9
  • 30

1 Answers1

0

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.

Lakshay Rohilla
  • 1,654
  • 6
  • 9
  • 30
  • Wouldn't it be easier to use the. Swiper web component with React as suggested in the documentation? https://swiperjs.com/element – Yogi Sep 01 '23 at 16:40