找不到module：无法解析“swiper/react”

IT技术 reactjs swiper swiperjs
2021-05-15 02:47:18

最新版本的 Swiper 也有同样的问题。它适用于我以前的项目，但现在不起作用。甚至没有那个版本。最新版本也试过了。

这是我的代码。

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";

const App = () => {
  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>
  );
};

export default App;

每当我运行我的代码时，它都会说，“找不到module：无法解析 'swiper/react'”。

4个回答

swiper 版本 7 仅适用于纯 ESM。如果不是，您必须降级到版本 6.8.4

npm：

npm install swiper@6.8.4

纱：

yarn add swiper@6.8.4

然后添加如下结构：

import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'

<Swiper
      spaceBetween={50}
      slidesPerView={3}
      centeredSlides
      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>

Create React App 还不支持纯 ESM 包。仍然可以使用 Swiper (7.2.0+)。

在这种情况下，我们需要使用直接文件导入

// Core modules imports are same as usual
import { Navigation, Pagination } from 'swiper';
// Direct React component imports
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';

// Styles must use direct files imports
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module

来源：Swiper 文档 | https://swiperjs.com/react#usage-with-create-react-app

swiper module中没有索引文件。所以只需更改导入路径

 import { Swiper, SwiperSlide } from 'swiper/react`'; 

 to

 import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';

在 React 上修复 Swiperjs 最新版本的 swiperjs 似乎有问题。

  • 如果您已经添加到您的react项目中，请卸载 swiperjs

    npm uninstall swiper

  • 安装 Swiperjs 版本 6.0.2

    npm install swiper@6.0.2

如果这有帮助，请告诉我 :) Happy Hacking

其它你可能感兴趣的问题
上一篇如何确定实际打印速度（TEVO Tarantula/Cura）？ 下一篇如何在 React 状态下更新对象