nuxt-auth: Cannot find module '#auth' or its corresponding type declarations. TS error

Environment

------------------------------
- Operating System: Windows_NT
- Node Version:     v18.16.0
- Nuxt Version:     3.5.2
- Nitro Version:    2.4.1
- Package Manager:  pnpm@8.5.1
- Builder:          vite
- User Config:      modules, auth
- Runtime Modules:  @sidebase/nuxt-auth@0.6.0-beta.2
- Build Modules:    -
------------------------------

Reproduction

Getting this error is as simple as just pasting import { NuxtAuthHandler } from '#auth' into [...].ts file in server/api/auth directory.

Describe the bug

It seems like TS can’t find declaration for this module. image

Additional context

I made sure it’s not just an issue on my side, and tried it on 3 different machines (2 PCs and 1 VM) with Volar in takeover mode, as recommended by Nuxt, and still got the same results. I’ve tried to replicated this issue on Blitz, but failed in doing so. Here’s link to repo: https://github.com/KitsuneKenshi/nuxt-auth-ts-error

Logs

No response

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Reactions: 10
  • Comments: 16 (3 by maintainers)

Most upvoted comments

@FollowJack basically what you have to do is create a file in the types folder, called next-auth.d.ts. Inside this file, you can make something like this:

import NextAuth, { DefaultSession } from "next-auth"

declare module "next-auth" {
/**
* Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
*/
interface Session {
user: {
/** The user's postal address. */
address: string
} & DefaultSession["user"]
}
}

Address is an example value, and you should change it, to what you need inside user type. At least that’s what I did, and it worked.

Hi! I still dont get it. It tried everything what is suggested in this thread but nothing works. To be honest Im wondering about the ‘#auth’ import. Never seen something like this before. When I was switching from React to Vue I thought it would get easier to handle authentication and sessions but with Vue.js it just seems to get much more complicated. 😦 Now the thread is closed but there is still no proper solution…or im just too stupid to find it. Can anybody help?

I got it to work using the following tsconfig.json:

{
  "extends": "../.nuxt/tsconfig.server.json",
  "include": [
    "../.nuxt/types/nitro.d.ts",
    "../.nuxt/types/auth.d.ts",
    "../server/**/*"
  ]
}

I had this issue out of the gate until I threw caution to the wind and built my project anyway… and since then it finds #auth. Same thing happened with the auth: property in nuxt.config… couldn’t be found until the project was built the first time.

Please more instructions on this one.

@purefunctor thanks for providing work-around for this issue, but now it doesn’t update types for custom data in session. Do you have any possible solutions for that?

EDIT: Figured it out myself. I didn’t check next-auth docs. Everything works now.

Could you elaborate? Im having the same problem

@purefunctor thanks for providing work-around for this issue, but now it doesn’t update types for custom data in session. Do you have any possible solutions for that?

EDIT: Figured it out myself. I didn’t check next-auth docs. Everything works now.