My attempt to deploy a project on Vercel is encountering an error during the building phase. The error message states that React icons cannot be found, even though they are installed in the package.json file and imported correctly in the component using the module.
You can find all the code in my public repository: https://github.com/Benevos/react-nextjs-tailwind-juice-slider
The problematic component looks like this:
'use client';
import React from 'react';
import Link from "next/link";
import Navbar from "@/components/Navbar";
import { FaCircleUser } from "react-icons/fa6"; \\ <---- Here is where the error shows
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
This is how the package.json file looks like:
{
"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 logs:
https://i.stack.imgur.com/qolcZ.png
I followed the recommended installation command by React Icons documentation (npm install react-icons --save).
I have tried creating a new project, installing React Icons at the beginning, and importing all the source code, but the issue remains unresolved.
I also checked this Stack Overflow post, but it doesn't seem to address the problem I'm facing.
If anyone has any insight into what might be causing this issue, please let me know.