I am experimenting with route groups and nested layout files when every import using “@” threw module-not-found

jsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@lib/*": ["./src/lib/*"],
    }
  }
}

This is the error I am getting

./src/app/(main)/dashboard/dashboard.js:6:1
Module not found: Can't resolve '@/lib/util/date'
  4 | import { signOut } from "next-auth/react";
  5 |
> 6 | import { longDate } from "@/lib/util/date";
    | ^
  7 | import { standardTime } from "@/lib/util/time";
  8 | import { CalendarBlank } from "@phosphor-icons/react/dist/ssr";
  9 | import { CaretDown, CaretLeft, Gear, Users, X } from "@phosphor-icons/react";

https://nextjs.org/docs/messages/module-not-found

Folder structure:

Any help would be very appreciated. Thanks

Nextjs version 14.2.3

Tried replacing @/ with ../../ (however many was necessary) …it worked, but is not a viable option.