My project was going pretty smoothly. Then I wanted to experiment and added this tailwind class to one of the texts. -

relative after:content-[''] after:w-full after:h-[30px] after:left-0 after:bottom-[-20px] after:z-10 after:absolute after:bg-center after:bg-no-repeat after:bg-cover after:bg-[url('../public/line.svg')]

I got this Module not found: Can't resolve '../public/line.svg' error. It was pretty obvious.

However, when I removed the line and tried npm run dev again, I am still getting the same error.

I thought it was ./next being reused. I deleted that and node_module. Reinstalled and tried spinning up dev server again but the same error shows even though the line is removed.

import Image from "next/image";
import Javed2 from "@/public/Javed2.jpeg";
import { Funnel_Sans } from "next/font/google";

const lexendDaca = Funnel_Sans({
    weight: "400",
    subsets: ["latin"],
});

export default function Hero() {
    return (
        <section className="flex justify-center items-center h-svh bg-[#1C1D20]">
            <div className="flex justify-center">
                {/* Texts */}
                <div className="flex flex-col select-none">
                    <p className="text-gray-200 text-center">Hello, I am</p>

                    <h1 className={`text-7xl text-gray-200 ${lexendDaca.className}`}>
                        Javed
                    </h1>

                    <p className={`text-7xl text-gray-200 ${lexendDaca.className}`}>
                        Rasin
                    </p>
                </div>

                {/* Image */}
                {/* <Image src={Javed2} alt="Javed Rasin in the smoke" className="w-50" /> */}
            </div>
        </section>
    );
}

// relative after:content-[''] after:w-full after:h-[30px] after:left-0 after:bottom-[-20px] after:z-10 after:absolute after:bg-center after:bg-no-repeat after:bg-cover after:bg-[url('../public/line.svg')]