如何修复Swiper 5.2.1版本的模块导入与语法警告问题

问题原因 #

Swiper 5.x 版本不支持 ES 模块的按需解构导入（即import { Navigation } from 'swiper'这种写法），该特性是从 Swiper 6 才开始引入的。你当前使用 5.2.1 版本，却用了高版本的语法，所以会出现export 'Navigation' was not found in 'swiper'的警告。

解决方案 #

方案一：升级 Swiper 到 6+ 版本（推荐） #

升级后可以保留你当前的代码结构，只需调整导入路径：

1. 执行命令升级 Swiper：

npm install swiper@latest --save

2. 修改 app.js 中的导入逻辑，直接从swiper导入模块（无需从swiper/bundle导入）：

import * as flsFunctions from "./modules/functions.js";
import Swiper from 'swiper';
import {
    Navigation,
    EffectFade,
    Pagination,
    Thumbs,
    Controller,
    FreeMode,
    Scrollbar,
    A11y,
    Mousewheel
} from 'swiper';
// 导入对应样式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/effect-fade';
import 'swiper/css/pagination';
import AOS from 'aos';

flsFunctions.isWebp();

const swiper = new Swiper('.auctions-slider', {
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next1',
        prevEl: '.swiper-button-prev1'
    },
    modules: [Navigation, EffectFade, Pagination],
    autoHeight: true,
    speed: 500, 
    slidesPerView: 2.8,
})

方案二：继续使用 Swiper 5.2.1 版本 #

调整导入和初始化方式，适配 5.x 的语法：

1. 修改 app.js 的导入逻辑，直接导入模块对应的 JS 文件：

import * as flsFunctions from "./modules/functions.js";
import Swiper from 'swiper';
// 导入所需模块的JS文件
import 'swiper/js/navigation';
import 'swiper/js/effect-fade';
import 'swiper/js/pagination';
// 导入对应样式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/effect-fade';
import 'swiper/css/pagination';
import AOS from 'aos';

flsFunctions.isWebp();

2. 初始化 Swiper 时去掉modules配置项，5.x 版本会自动注册导入的模块：

const swiper = new Swiper('.auctions-slider', {
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next1',
        prevEl: '.swiper-button-prev1'
    },
    effect: 'fade', // 启用fade效果需添加此配置
    pagination: {
        el: '.swiper-pagination', // 替换为你的分页器DOM选择器
        clickable: true // 按需添加分页器配置
    },
    autoHeight: true,
    speed: 500, 
    slidesPerView: 2.8,
})

注意：你之前尝试从swiper/bundle导入也报错，是因为 Swiper 5 的bundle是全量打包文件，内部并未导出单独的Navigation等变量，所以解构导入依然找不到对应模块。

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