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

CodePudding user response：

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