错误:在 next.js 中找不到模块“swiper/react”

Posted

技术标签:

【中文标题】错误:在 next.js 中找不到模块“swiper/react”【英文标题】:Error: Cannot find module 'swiper/react' in next.js 【发布时间】:2021-11-22 07:49:16 【问题描述】:

将 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 中的“import cost”扩展显示了导入模块的大小,所以我认为 Next.js 或 webpack 导出它有问题,但不知道如何使它工作。

我从 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

【问题讨论】:

谢谢,@brc-dd。是的,我刚刚在这里看到了这个问题:github.com/vercel/next.js/issues/9607。无论如何,请您解释一下我该如何“转换”它? 另外,你到底在做什么?我无法重现它:codesandbox.io/s/optimistic-mestorf-pdh06?file=/pages/index.js 检查我的答案@brc-dd 【参考方案1】:

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

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

【讨论】:

你是如何解决 Eslint 错误的?我正在使用带有 Next.js 和 Eslint 的 Swiper v7,但它给了我一个无法解析路径的导入错误。 我认为最好为此提出一个新问题,并将您的代码+错误也包括在内。就我而言,该错误与 next、webpack 和 eslint 无关。我的问题是过时的 Node.js 版本。

以上是关于错误:在 next.js 中找不到模块“swiper/react”的主要内容,如果未能解决你的问题,请参考以下文章

在 Next.js 应用程序中找不到 API 路由(找不到该页面)

next.js + GraphQL:“不变违规:在上下文中找不到“客户端”或作为选项传入......”

解析错误:找不到模块'next/babel'

Next.js 找不到模块 loader.js

错误:在 server.js 中找不到模块“res”

在 VScode 中找不到 @angular/fire/firestore 模块错误