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

Question

将 Swiper 升级到版本 7.0.7 后，我收到了这个恼人的错误：

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

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

在之前的版本中（6.8）我没有看到这个错误。我还检查了 migration guide 和 github 问题，但没有找到有用的答案。

问题是 VSCode 中的“导入成本”扩展显示了导入模块的大小，所以我认为 Next.js 或 webpack 导出它有问题，但不知道如何让它发挥作用。

我 copy/pasted 来自 Swiper 文档的确切代码，但如果有帮助，我也会写在这里：

/* _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>
   );
}

更新

将Next.js升级到11.1.2后，错误信息变为：
Error: Not supported

Answer 1

我找到了解决方案。它 与 next.js 和 webpack 无关。 ESM 模块支持从 Node.js 12.20 开始，我的是 12.16。升级了我的 Node.js 安装，现在一切正常！

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

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

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

node.js

reactjs

webpack

next.js

swiper.js

更新