尝试导入错误：“useSwiper”未从“swiper/react/swiper-react”导出

Question

我在 Next.js 中使用 SwiperJS 并尝试设置自定义导航。我想按照文档中的说明使用 useSwiper 挂钩（https://swiperjs.com/react#use-swiper），但导入不起作用。

尝试导入钩子时；

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

我遇到了错误

Attempted import error: 'useSwiper' is not exported from 'swiper/react/swiper-react'.

我已经检查了 swiper-react.js 文件，据我所知它确实导出了 useSwiper 钩子；

import { Swiper } from './swiper.js';
import { SwiperSlide } from './swiper-slide.js';
export { useSwiperSlide, useSwiper } from './context.js';
export { Swiper, SwiperSlide }

Swiper 和 SwiperSlide 导入工作正常。

不确定为什么会发生这种情况，是否有人可以帮忙？

Answer 1

您面临的问题可能与您如何在 Next.js 项目中从 SwiperJS 导入 useSwiper 挂钩有关。根据您提供的代码，您似乎正在尝试正确导入它。但是，您的项目设置或依赖项可能存在一些问题。以下是一些可帮助您排除故障并解决此问题的步骤：

1. 检查 SwiperJS 版本：确保您使用的是兼容版本的 SwiperJS。您显示的代码似乎来自旧版本的 SwiperJS。确保您安装了支持 useSwiper hook 的正确版本。

您可以在项目的 package.json 文件中或通过运行以下命令来检查已安装的 SwiperJS 版本：

检查您的导入声明：仔细检查 useSwiper 的导入声明，以确保没有拼写错误或错误。应该是这样的：

检查您的 Webpack/Babel 配置：确保项目的 Webpack 或 Babel 配置正确设置以处理 ES 模块。在大多数情况下，Next.js 应该自动处理这个问题，但值得检查是否有任何自定义配置导致问题。

检查拼写错误：有时，轻微的拼写错误可能会导致导入问题。验证文件名和路径是否正确且区分大小写。