I am trying to deploy a project to Vercel but it marks down an error on the building phase, saying react icons can't be found even if it is installed to package.json
and imported correctly to the component that uses that module.
Here is the public repository where is all my code since it planned to be public: https://github.com/Benevos/react-nextjs-tailwind-juice-slider
This is the faulty component:
'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 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 logs:
I used the suggested command by react icons documentation to install the module (npm install react-icons --save
).
Already tried to start a fresh project installing react icons at beggining and importing all the source code but still not working.
I also checked deploy my next.js project on vercel, Cannot find module 'react-icons/Fa' or its corresponding type declarations but seems not to be the problem.
Someone knows what could be the problem, please?
your code builds
and starts with npm run start
Maybe you need to update node
version. my system has:
node --version
v18.17.1
I also deployed on vercel successfully:
here is the production link:
https://testing-vercel-bay.vercel.app/
check your vercel settings for node version