Question

这个 Next JS 身份验证表达式无法在 Typescript 文件中调用吗？

2022-04-28

4154

reactjs typescript next.js next-auth

我正在为我的 Next js 应用程序创建登录方法，并使用 GitHub repo 提供的推荐文档。

但是，当我到达 auth 文件夹步骤时，我收到此错误。对于登录提供程序。

在 [...nextauth].ts 中

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

我不明白为什么，因为我已经按照文档操作，但仍然收到此错误

这是文件代码

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
    },
  },
})

Answer 1

您必须在 tsconfig.json 中将 "esModuleInterop": true 设置为 true

或者您也可以尝试：

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

编辑：

import NextAuth from 'next-auth'; 从文件 next-auth.d.ts 导入

我认为您应该将文件移动到类型文件夹中，如本文档中所述 https://next-auth.js.org/getting-started/typescript#module-augmentation

如果您重命名/删除文件，错误就会消失

Answer 2

确保您没有使用 canary 版本：

将此更改：

“@next-auth/prisma-adapter”：“canary”，

为此：

“@next-auth/prisma-adapter”：“^1.0.7”，

确保您已将会话配置添加到 next-auth.d.ts

它应该是这样的：

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import NextAuth, { DefaultSession } from "next-auth";
import "next-auth/jwt";

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"];
  }
}

// Read more at: https://next-auth.js.org/getting-started/typescript#module-augmentation

declare module "next-auth/jwt" {
  interface JWT {
    /** The user's role. */
    userRole?: "admin";
  }
}