The error: “Module not found: Can’t resolve ‘swiper/react’” is a common error that can show up in many ways. In this blog, we will go through some of the ways you can fix this issue. Read on.

When Does The Error: “Module not found: Can’t resolve ‘swiper/react’” Occur?

When attempting to utilize Swiper in your reactjs application, you may encounter the following issue.

Module not found: Can't resolve 'swiper/react'

How To Solve “Module not found: Can’t resolve ‘swiper/react’” Issue

Approach 1: Import in this way

To solve the error “Module not found: Can’t resolve ‘swiper/react’”, let’s follow two steps below:

1. Firstly, downgrade the swiper version to [email protected]. 
2. Next, import swiper in this way: import Swiper from ‘swiper’;.

import Swiper from 'swiper';

Approach 2: Downgrade Swiper

This appears to be a problem with the most recent version of swiper. As a result, we suggest that you downgrade to [email protected]. Simply execute this command.

1. If you’ve already included swiperjs in your react project, uninstall it.

npm remove swiper 

2. Install version 6.0.2 of Swiperjs.

[email protected] npm install

Approach 3: Upgrade the bundler/environment/framework/tooling

If you’re having trouble with Swiper 7, it’s because your bundler/environment/framework/tooling doesn’t support ESM packages. Remain on Swiper 6 unless you upgrade your bundler/environment/framework/tooling.

Approach 4: Using this command

If your error “Module not found: Can’t resolve ‘swiper/react’” has not resolved, please refer to our following scenario.

We have tried a lot of methods, but none of them work for us. We still receive this error and we suspect that there might be a problem with the package itself, so we use an earlier version by running this command:

npm install [email protected]

After doing this, we notice that new folders have been added to the swiper folder in the node modules, and the website start functioning normally without any error.

This is a simple method, right? But it will give you amazing result. Let’s do it.

Conclusion

We hope you enjoyed our article about the error. With this knowledge, we know that you can fix your error: “Module not found: Can’t resolve ‘swiper/react’” quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!

Read more

→ Approaches For The Error: Module not found: Can’t resolve ‘@material-ui/core/Container’ in Reactjs?