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

jsconfig.json:

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

This is the error I am getting

⨯ ./src/app/(main)/dashboard/page.js:9:1
Module not found: Can't resolve '@lib/schemas/subscriptionSchema'
   7 | import NotAccepted from "./notAccepted";
   8 |
>  9 | import Subscription from "@lib/schemas/subscriptionSchema";
     | ^
  10 | import Users from "@/lib/schemas/userSchema";
  11 | import Events from "@/lib/schemas/eventSchema";
  12 | import Stripe from "stripe";

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

Folder structure:

Any help would be much appreciated. Thanks

Nextjs version 14.2.3

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