Vercel部署Next.js项目报错：react-icons模块未找到（已安装）

问题描述 #

将Next.js项目部署到Vercel时，构建阶段提示找不到react-icons模块，但该模块已在package.json中声明，组件导入方式也符合规范。

报错组件代码 #

'use client';

import React from 'react';
import Link from "next/link";

import Navbar from "@/components/Navbar";

import { FaCircleUser } from "react-icons/fa6"; // <---- 报错位置
import { FaShoppingBag } from "react-icons/fa";

import { Londrina_Solid } from 'next/font/google';

const londrinaSolid = Londrina_Solid({weight: '400' , subsets: ['latin']});

function Header({ backgroundColor, textColor }) {
  return (
    <header id="header" style={{backgroundColor: backgroundColor, color: textColor}}
              className={`flex justify-start items-center 
                          py-4 font-semibold
                          relative transition duration-[1600ms] z-0`}>

        <Link href="/#" className={`text-3xl flex-initial ml-10 
                                        max-md:ml-5 ${londrinaSolid.className}`}>
            Trademark
        </Link>

        <Navbar/>

        <div className="flex text-xl gap-4 
                        flex-initial ml-auto
                        mr-10 max-md:mr-5">

            <Link href="/#">
            <FaCircleUser/>
            </Link>

            <Link href="/#">
            <FaShoppingBag/>
            </Link>
        </div>  

    </header>
  )
}

export default Header

项目package.json配置 #

{
  "name": "juice-slider-vercel-fix",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^4.12.0",
    "sass": "^1.69.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"
  }
}

Vercel报错日志 #

已尝试的操作 #

• 按照react-icons官方文档执行npm install react-icons --save安装模块
• 新建项目迁移代码，问题未解决
• 排查Stack Overflow相关问题，未找到有效方案

问题原因及解决方法 #

1. 检查Vercel构建依赖配置
   进入Vercel项目的Settings > Build & Development Settings，确认Install Command设置为npm install（或对应包管理器命令），且未配置跳过依赖安装的选项。

2. 清理本地依赖缓存并重新提交
   执行以下命令清除本地缓存，重新安装依赖后提交代码：

   rm -rf node_modules package-lock.json
   npm install
   git add package-lock.json
   git commit -m "Refresh dependencies cache"
   git push
   

3. 升级react-icons版本
   尝试升级到最新版本的react-icons，确保与Next.js 14.0.4兼容：

   npm install react-icons@latest --save
   

4. 验证导入路径正确性
   确认FaCircleUser确实属于react-icons/fa6包，若仍报错，可临时替换为react-icons/fa中的FaUserCircle测试，排除图标包路径问题。

5. 强制Vercel重新构建并清除缓存
   在Vercel项目的Deployments页面，选择最近的构建，点击Redeploy并取消勾选Use existing build cache，强制重新安装依赖并构建。

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