VSCode IntelliSense not working properly for NextJS Typescript

Question

The problem

I've created a Next app with npx create-next-app using the App router and a bunch of 3rd party packages such as next-auth, axios, etc.

The problem is that I don't get import suggestions for almost all of these packages. The interesting bit is that I get suggestions for next and react:

tsconfig.json (default, npx create-next-app generated it):

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "tailwind.config.js"
  ],
  "exclude": ["node_modules"]
}

package.json:

{
  "name": "course-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
        "@hookform/resolvers": "^3.2.0",
        "@mantine/hooks": "^6.0.19",
        "@next-auth/prisma-adapter": "^1.0.7",
        "@prisma/client": "^5.1.1",
        "@radix-ui/react-accordion": "^1.1.2",
        "@radix-ui/react-alert-dialog": "^1.0.4",
        "@radix-ui/react-avatar": "^1.0.3",
        "@radix-ui/react-checkbox": "^1.0.4",
        "@radix-ui/react-dialog": "^1.0.4",
        "@radix-ui/react-dropdown-menu": "^2.0.5",
        "@radix-ui/react-label": "^2.0.2",
        "@radix-ui/react-navigation-menu": "^1.1.3",
        "@radix-ui/react-popover": "^1.0.6",
        "@radix-ui/react-radio-group": "^1.1.3",
        "@radix-ui/react-scroll-area": "^1.0.4",
        "@radix-ui/react-select": "^1.2.2",
        "@radix-ui/react-separator": "^1.0.3",
        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-switch": "^1.0.3",
        "@radix-ui/react-tabs": "^1.0.4",
        "@radix-ui/react-toast": "^1.1.4",
        "@radix-ui/react-tooltip": "^1.0.6",
        "@tanstack/react-query": "^4.32.6",
        "axios": "^1.4.0",
        "bcryptjs": "^2.4.3",
        "cheerio": "^1.0.0-rc.12",
        "class-variance-authority": "^0.7.0",
        "cloudinary": "^1.40.0",
        "clsx": "^2.0.0",
        "crisp-sdk-web": "^1.0.21",
        "date-fns": "^2.30.0",
        "fastest-levenshtein": "^1.0.16",
        "gray-matter": "^4.0.3",
        "lucide-react": "^0.265.0",
        "mailgun.js": "^9.3.0",
        "next": "14.0.3",
        "next-auth": "^4.22.1",
        "next-cloudinary": "^4.17.1",
        "next-mdx-remote": "^4.4.1",
        "next-themes": "^0.2.1",
        "nodemailer": "^6.9.7",
        "puppeteer": "^21.5.2",
        "query-string": "^8.1.0",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-hook-form": "^7.45.4",
        "react-select": "^5.7.4",
        "react-share": "^4.4.1",
        "sharp": "^0.32.6",
        "stripe": "^14.3.0",
        "tailwind-merge": "^1.14.0",
        "tailwindcss-animate": "^1.0.6",
        "zod": "^3.21.4"
    },
    "devDependencies": {
        "@faker-js/faker": "^8.0.2",
        "@types/bcryptjs": "^2.4.6",
        "@types/node": "^20",
        "@types/nodemailer": "^6.4.14",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "autoprefixer": "^10.0.1",
        "eslint": "^8",
        "eslint-config-next": "14.0.3",
        "postcss": "^8",
        "prettier": "^3.0.3",
        "prettier-plugin-tailwindcss": "^0.5.6",
        "prop-types": "^15.8.1",
        "tailwindcss": "^3.3.0",
        "typescript": "^5"
    }
}

What I've tried

• reinstalling and updating the packages
• removing the packages one by one to figure out which one causes the problem (if it's a compatibility problem)
• recreating a fresh project and installing same deps
• recreating a fresh project without the App router and installing same deps
• reinstalling with yarn
• setting different typescript versions
• downgrading to Next13
• removing includes and excludes fields from tsconfig.json
• trying to tell tsconfig.json where to find the types

How to reproduce

You can replicate the issue in this GitHub repo: https://github.com/kmpizmad/course-app

After cloning, install the dependencies with any package manager and try to import any of the 3rd party package by typing a function in the app/page.tsx

Note that manually importing the functions work as expected, so it's not like I'm missing any type definition file, it's just that VSCode doesn't recognize/find the declaration file (that's my guess).