Next.js v12.0.3使用Swiper v7.2.0报woff字体模块未找到错误如何解决

这个错误是Swiper 7.x版本的内联字体打包逻辑与Next.js 12.x的默认webpack资源解析规则不兼容导致的。Swiper 7.x将内置的导航、分页相关图标字体直接以base64的形式内联写入样式文件，Next.js的资源解析器会将这部分内容误判为相对路径的本地资源，尝试查找对应的文件失败后抛出报错。

下面按实现成本从低到高给出三种可行方案：

方案1：引入不含内置字体的Swiper样式（推荐） #

不需要修改任何配置，只需要调整Swiper样式的引入路径即可：

• 将原有全量样式引入语句替换为独立模块的最小样式：

// 替换前
// import 'swiper/css';
// import 'swiper/css/navigation';
// import 'swiper/css/pagination';

// 替换后
import 'swiper/swiper.min.css';
import 'swiper/modules/navigation/navigation.min.css';
import 'swiper/modules/pagination/pagination.min.css';

• 替换后Swiper不会加载内置字体，你可以自行通过自定义css或者svg实现需要的图标效果。

方案2：调整Next.js webpack配置适配内联资源 #

如果需要保留Swiper的默认图标，修改项目根目录下的next.config.js文件，添加字体资源解析规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    // 添加字体文件解析规则
    config.module.rules.push({
      test: /\.(woff2?|eot|ttf|otf)$/i,
      type: 'asset/inline',
    });
    return config;
  }
}

module.exports = nextConfig

修改完成后重启本地开发服务即可生效。

方案3：降级Swiper到兼容版本 #

Swiper 6.x版本的样式打包逻辑与Next.js 12.x完全适配，没有内联字体的兼容问题，如果前两种方案都不满足你的需求，可以直接降级Swiper版本：

# 卸载当前版本
npm uninstall swiper
# 安装兼容的6.x稳定版
npm install swiper@6.8.4

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