为什么Create React App中导入swiper的EffectCards会报导出错误？

• Swiper v8及以上版本对特效模块做了拆分，仅EffectFade这类基础特效保留在swiper主入口导出，EffectCards属于非核心特效，被拆分到了独立子模块中，主入口不再提供该导出。
• 你使用的CRA版本默认不兼容纯ESM包的导入规则，无法识别Swiper主入口中ESM模式下的特效导出声明，进一步加剧了导入失败问题。

直接从Swiper的特效专属子路径导入即可，适配CRA的CJS兼容模式，导入代码如下：

import { EffectCards } from "swiper/modules/effect-cards";
import { Swiper, SwiperSlide } from "swiper/react/swiper-react.js";

导入后需要在Swiper组件的modules属性中显式注册才能生效，使用示例：

<Swiper
  modules={[EffectCards]}
  effect="cards"
  {/* 其他Swiper配置项 */}
>
  <SwiperSlide>内容1</SwiperSlide>
  <SwiperSlide>内容2</SwiperSlide>
</Swiper>

如果上述路径仍触发导入报错，可以尝试兼容旧版本的CJS路径：

import { EffectCards } from "swiper/dist/cjs/modules/effect-cards";

内容的提问来源于stack exchange，提问作者Anthony