Error: Cannot find module 'swiper/react' in next.js

Question

After upgrading Swiper to Version 7.0.7, I'm getting this annoying error:

Error: Cannot find module 'swiper/react'
.
.
.
Source

.next\server\pages\items.js (1:0) @ Object.swiper/react
> 1 | module.exports = require("swiper/react");

In the previous Version (6.8) I didn't see this error. I also checked the migration guide and github issues but found no helpful answer.

The thing is "import cost" extension in VSCode is showing the size of the imported module, so I think there's a problem with Next.js or webpack exporting it, but have no idea how to make it work.

I copy/pasted the exact code from Swiper docs, but will write it here too if it helps:

/* _app.js - imported here because Next doesn't allow global css imports elsewhere */
import 'swiper/scss';

/* slider component which is used inside pages/items.js */
import { Swiper, SwiperSlide } from "swiper/react"; /* 72.4k (gzipped 21.4k) */

export default function CategoriesBar() {
   return (
      <Swiper
         spaceBetween={50}
         slidesPerView={3}
         onSlideChange={() => console.log('slide change')}
         onSwiper={(swiper) => console.log(swiper)}
      >
         <SwiperSlide>Slide 1</SwiperSlide>
         <SwiperSlide>Slide 2</SwiperSlide>
         <SwiperSlide>Slide 3</SwiperSlide>
         <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
   );
}

Update

after upgrading Next.js to 11.1.2, the error message changed to:
Error: Not supported

Thanks, @brc-dd. Yeah, I just saw the issue here: github.com/vercel/next.js/issues/9607. Anyways, may you please explain how can I "transpile" it? — Shahriar
– Shahriar, Commented Sep 30, 2021 at 13:28
Also, what exactly are you doing? I am not able to reproduce it: codesandbox.io/s/optimistic-mestorf-pdh06?file=/pages/index.js — brc-dd
– brc-dd, Commented Sep 30, 2021 at 14:34

Shahriar · Accepted Answer · 2021-09-30 14:40:32Z

3

I found the solution. It was not related to next.js nor webpack. ESM modules support started from Node.js 12.20 and mine was 12.16. Upgraded my Node.js installation & everything is working fine now!

https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

answered Sep 30, 2021 at 14:40

Shahriar

2,4737 gold badges32 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vicasas Over a year ago

How did you solve the Eslint error? I am using Swiper v7 with Next.js and Eslint but it gives me an import error that cannot resolve the path.

Shahriar Over a year ago

I think it's better to ask a new question for that and included your code + error there as well. In my case, the error was not related to next, nor webpack nor eslint. My problem was the outdated Node.js version.

Collectives™ on Stack Overflow

Error: Cannot find module 'swiper/react' in next.js

Update

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related