Module not found: Error: Package path ./react/swiper-react is not exported from package

Question

I upgraded to react-scripts v5, and I'm getting these errors:

This is how my imports look based on Swiper documentation:

import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';

import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.min.css';

user_809351 · Answer

Change

import { SwiperSlide } from 'swiper/react/swiper-react.js';

to

import { SwiperSlide } from 'swiper/react';

user_20072181 · Answer

Adding to what Rafal posted, another fix to your issue could be changing the following line

import 'swiper/swiper.min.css';

There are various different ways of importing the Swiper .css depending on what technologies you are using.

If you read the official documentation: https://ionicframework.com/docs/react/slides
you can see all the different ways of importing the css

Not using Create React App? You can import the Swiper CSS from swiper/css instead.

So in my case where I am developing my app in Ionic, my import would look like this:

import 'swiper/css';

There are other options as well depending on how you are styling your sheets.

For developers using SCSS or Less styles, Swiper also provides imports for those files.

For Less styles, replace css with less:

import 'swiper/swiper.less';

For SCSS styles replace css with scss:

import 'swiper/swiper.scss';

Hope it helps!