The inferred type of 'auth' cannot be named without a reference

[yordis]

hey folks, I am trying to upgrade the setup to V5 with a very basic auth file (I commented the code to test it out), TypeScript compiler is giving me some trouble:

import NextAuth, { NextAuthConfig } from 'next-auth';
const config = {

} satisfies NextAuthConfig;
export const { handlers, auth, signIn, signOut } = NextAuth(config);

./src/auth.ts:67:26
Type error: The inferred type of 'auth' cannot be named without a reference to '../../../.yarn/__virtual__/next-auth-virtual-b4c85b046e/0/cache/next-auth-npm-5.0.0-beta.8-b5debcb93d-4458f65a76.zip/node_modules/next-auth/lib'. This is likely not portable. A type annotation is necessary.

[yordis]

Hey @ThangHuuVu, I sincerely apologize for tagging you directly. I am unsure what to do anymore. Have you seen this issue before or know what the issue is with TypeScript?

PR: https://github.com/straw-hat-team/nextjs-starter-kit/pull/157

[yordis]

Hey @ThangHuuVu, I removed yarn altogether and used pnpm, and the issue still persists...

[xentobias]

I have the same problem and I'm using npm. Next-Auth (5.0.0-beta.13)

[yordis]

Should I create an issue thou? At this point I do not believe it is me then

[tszhong0411]

I got the same problem with 5.0.0-beta.13.

[xentobias]

@yordis, it would probably be really helpful if you could create an issue.

A (not so elegant) temporary workaround would be:

const nextAuthResult = NextAuth({
  // ...
})

export const auth: NextAuthResult["auth"] = nextAuthResult.auth;
export const {
  handlers: { GET, POST },
  signIn,
  signOut,
}: NextAuthResult = nextAuthResult;

[yordis]

After trying multiple things following microsoft/TypeScript#42873 I decided to add to my Next Apps computation:

{
  "compilerOptions": {
    "declaration": false,
  }
}

It is fixed under "@straw-hat/tsconfig": "4.2.2"

I am not sure what the downsides are doing that, for app compilations, I would love to hear your opinions here:

[Falven]

How is disabling declarations the accepted answer???

[yordis]

Since initiating this discussion, I determined my best solution and answer. I know how much time somebody could spend on the topic since I have already spent many hours on it. I tried everything people suggested or combination of things.

I'm open to hearing if you have a more practical approach; I am willing to turn off an app's declaration, but I wish I did not have to be that way; as you noticed, I asked for opinions about it.

That said, please contribute a constructive alternative if you have one. Otherwise, your feedback comes across as unproductive criticism.

[Falven]

It's productive criticism. This shouldn't be accepted as an answer as it's not the correct answer for apps with a well defined public interface.

[yordis]

What is the proper solution? Could you focus on that? I am more than happy to mark your solution as the answer.

Otherwise,

[Falven]

One option is to explicitly re-type the destructed declarations.

import authOptions from './config/auth.config';
import NextAuth, { type NextAuthResult } from 'next-auth';

const result = NextAuth(authOptions);

export const handlers: NextAuthResult['handlers'] = result.handlers;
export const auth: NextAuthResult['auth'] = result.auth;
export const signIn: NextAuthResult['signIn'] = result.signIn;
export const signOut: NextAuthResult['signOut'] = result.signOut;

This avoids the naming issue because each property is typed individually and doesn't require a single stable type name for the entire object. But it's really up to next-auth to make their declarations more stable.

[LouisLecouturier]

I am having the same issue but with the signIn variable

TS2742: The inferred type of signIn cannot be named without a reference to .pnpm/@[email protected]/node_modules/@auth/core/providers. This is likely not portable. A type annotation is necessary.

My code :

import NextAuth from 'next-auth';
import Entra from 'next-auth/providers/microsoft-entra-id';

const {
  AZURE_ENTRA_TENANT_ID,
  AZURE_ENTRA_CLIENT_ID,
  AZURE_ENTRA_CLIENT_SECRET,
} = process.env;


export const { auth, handlers, signIn, signOut } : NextAuthResult = NextAuth({ // The signIn is marked as error
  providers: [
    Entra({
      tenantId: AZURE_ENTRA_TENANT_ID,
      clientId: AZURE_ENTRA_CLIENT_ID,
      clientSecret: AZURE_ENTRA_CLIENT_SECRET,
    }),
  ],
});