'This Next JS authentication expression is not callable in a Typescript file?

I am making a sign in method for my Next js application and am using the recommended documentation provided by the GitHub repo.

However when i reach the auth folder step i get this error. For the sign in providers.

in [...nextauth].ts

This expression is not callable.
  Type 'typeof import("/Users/farishtawazir/Desktop/template/next-auth")' has no call signatures.ts(2349)

I don't understand why as i have followed the documentation and still get this error

Here is the files code

import NextAuth from 'next-auth'
import Auth0Provider from 'next-auth/providers/auth0'
import FacebookProvider from 'next-auth/providers/facebook'
import GithubProvider from 'next-auth/providers/github'
import GoogleProvider from 'next-auth/providers/google'
import TwitterProvider from 'next-auth/providers/twitter'
// import AppleProvider from "next-auth/providers/apple"
// import EmailProvider from "next-auth/providers/email"

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export default NextAuth({
  // https://next-auth.js.org/configuration/providers/oauth
  providers: [
    /* EmailProvider({
         server: process.env.EMAIL_SERVER,
         from: process.env.EMAIL_FROM,
       }),
    // Temporarily removing the Apple provider from the demo site as the
    // callback URL for it needs updating due to  changing domains
      
    Providers.Apple({
      clientId: process.env.APPLE_ID,
      clientSecret: {
        appleId: process.env.APPLE_ID,
        teamId: process.env.APPLE_TEAM_ID,
        privateKey: process.env.APPLE_PRIVATE_KEY,
        keyId: process.env.APPLE_KEY_ID,
      },
    }),
    */
    FacebookProvider({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET,
    }),
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    TwitterProvider({
      clientId: process.env.TWITTER_ID,
      clientSecret: process.env.TWITTER_SECRET,
    }),
    Auth0Provider({
      clientId: process.env.AUTH0_ID,
      clientSecret: process.env.AUTH0_SECRET,
      issuer: process.env.AUTH0_ISSUER,
    }),
  ],
  theme: {
    colorScheme: 'light',
  },
  callbacks: {
    async jwt({ token }: unknown) {
      token.userRole = 'admin'
      return token
    },
  },
})

Solution 1:^[1]

You have to set "esModuleInterop": true to true in your tsconfig.json

or you can also try:

import * as next-auth from 'next-auth';

Edit:

import NextAuth from 'next-auth'; imports from the file next-auth.d.ts

i think you should move the file to a types folder as stated in this documentation https://next-auth.js.org/getting-started/typescript#module-augmentation

if you rename/remove the file the error is gone

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'This Next JS authentication expression is not callable in a Typescript file?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]