Next.js运行Swiper报./swiper.scss路径未导出错误如何解决

Swiper 7及以上版本重构了内部的包导出规则，旧版本的SCSS样式导入路径已被废弃，即使切换旧版本如果没有清理干净本地缓存的node_modules依赖，也会持续触发路径找不到的报错。

步骤1：清理依赖缓存 #

先清除本地残留的依赖文件，避免版本冲突：

• 删除项目根目录下的node_modules文件夹、package-lock.json（yarn用户删除yarn.lock，pnpm用户删除pnpm-lock.yaml）
• 执行npm install重新安装所有依赖

步骤2：修改_app.js中的样式导入路径 #

把原有样式导入语句替换为新路径：

import '../styles/globals.css'

// 替换原有scss导入路径
import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';
import 'swiper/scss/scrollbar';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

步骤3（可选，适配Swiper 9+版本）：优化组件导入逻辑 #

Swiper 9之后不再需要单独调用SwiperCore.use注册插件，可以直接通过Swiper组件的modules属性传入，同时原有的next/dist/client/image导入写法可简化为官方推荐的next/image，修改后的HeroSection.js代码如下：

import React from 'react'
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import Slider1 from '../public/assets/slider/sliderimage1.png'
import styles from '../styles/HeroSection.module.css';
// 直接导入需要的插件，不需要SwiperCore
import { Navigation,Parallax,EffectFade,Autoplay,Mousewheel, Pagination, Scrollbar, A11y } from 'swiper/modules';

function HeroSection() {
    return (
        <div className={styles.container}>
            <Swiper className={styles.slidercontainer}
                // 把插件传入modules属性
                modules={[Navigation ,Parallax,Autoplay, EffectFade,Mousewheel, Pagination, Scrollbar, A11y]}
                spaceBetween={0}
                effect="coverflow"
                slidesPerView={1}
                autoplay={{
                    "delay": 5000,
                    "disableOnInteraction": false
                }}
                loop={true}
                pagination={{
                    clickable:true
                  }}
                >
                    <SwiperSlide className="swiper-pagination-black">
                        <div>
                            <Image  src="/assets/slider/sliderimage1.png" alt="heroimage" height="1000" width="1000" /> 
                        </div>
                    </SwiperSlide>
                    <SwiperSlide className={styles.slider}>
                         <Image  src={Slider1} alt="heroimage" height="1000" width="1000" /> 
                    </SwiperSlide>
                    <SwiperSlide className={styles.slider}>
                        <Image  src="/assets/slider/sliderimage1.png" alt="heroimage" height="1000" width="1000" /> 
                    </SwiperSlide>
            </Swiper>
        </div>
    )
}

export default HeroSection

补充方案：继续使用旧版本语法 #

如果不想调整现有导入写法，可固定安装Swiper 6版本：

• 执行npm install swiper@6安装指定旧版本，原有导入代码无需修改即可正常运行。

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