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

Question

我在使用最新版本的 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;

每当我运行代码时，它都会显示“找不到模块：无法解析‘swiper/react’”。

Answer 1

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

节点管理：

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>

版本 6.8.4 文档在这里

Answer 2

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

Answer 3

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

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

 to

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

Answer 4

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

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

  npm uninstall swiper

• 安装 Swiperjs 版本 6.0.2

  npm install swiper@6.0.2

让我知道这是否有帮助:)快乐黑客

Answer 5

我在用着：

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

来源：github.com/nolimits4web/swiper/issues/4871

更新

现在，如果您将react-scripts升级到5.0.0，您可以使用：

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