为啥我会收到“尝试导入错误：'EffectCards' 未从 'swiper' 导出”？

Posted 2023-05-08

【中文标题】为啥我会收到“尝试导入错误：\'EffectCards\' 未从 \'swiper\' 导出”？

【英文标题】：Why do I get "Attempted import error: 'EffectCards' is not exported from 'swiper'"?为什么我会收到“尝试导入错误：'EffectCards' 未从 'swiper' 导出”？

【发布时间】：2021-12-19 12:15:00

【问题描述】：

我正在使用 Create React App 并已按照文档说明的方式导入，因为 Create React App 还不支持纯 ESM 包。

import  EffectCards  from "swiper";
import  Swiper, SwiperSlide  from "swiper/react/swiper-react.js";

但我得到了错误：Attempted import error: 'EffectCards' is not exported from 'swiper'.

EffectFade 工作正常，那么 EffectCards 为什么不呢？它还从哪里导出以使用 Create React App 导入？

【问题讨论】：

你为什么要使用为移动设备制作的包在网络上使用。除此之外，这个包有 131 个未解决的问题，仅由一个人维护，甚至他们自己网站上的东西也被破坏了，比如这个链接 swiperjs.com/demos#effect-cards，用于反应。他们的文档也很差。我不会使用那个包。

我也不确定为什么您（和他们的网站）说 CRA 不支持 ESM，它确实支持，不仅它使用 babel 来转译代码，而且大多数浏览器都支持 ESM。我很确定他们很久没有更新他们的网站了。

【参考方案1】：

官方文档中说：“默认Swiper React使用的是核心版的Swiper（没有任何额外的组件）。如果你想使用Navigation、Pagination等组件，你必须先安装它们。”

要安装它们：

import SwiperCore,  EffectFade, EffectCards  from "swiper";
SwiperCore.use([EffectFade, EffectCards]);

【讨论】：

执行此操作时我仍然遇到相同的错误。 EffectFade 无需安装即可使用，但 EffectCards 无论是否安装都无法使用。我使用的是 Reactjs 而不是 Native。

尝试导入 Swiper 而不是 SwiperCore

这不起作用，因为它已经从swiper/react/swiper-react.js 导入为 Swiper。我确实尝试过，但它会引发错误。仅导入 import EffectCards from "swiper"; 也不起作用。这是一个谜！

你能举一个可重现的例子吗？ @Archivec 的方法在官方文档的这个例子中有效：codesandbox.io/s/3pgoz?file=/src/App.jsx