javascriptreactjsnext.jsvercelreact-icons

Vercel can't deploy due to react icons module is not found but it is actually installed


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:

enter image description here

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?


Solution

  • your code builds

    enter image description here

    and starts with npm run start

    enter image description here

    Maybe you need to update node version. my system has:

    node --version
    v18.17.1
    

    I also deployed on vercel successfully:

    enter image description here

    here is the production link:

    https://testing-vercel-bay.vercel.app/

    check your vercel settings for node version

    enter image description here