为什么我的导入语句没有提取我需要的功能？

Question

我正在为我的应用程序使用 NextAuth：

我试图将数据拉入的主文件：[...nextauth].js

import NextAuth from "next-auth"
import Providers from "next-auth/providers"

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    Providers.Google({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here
    
  ],

我将鼠标悬停在“Google”上时收到的错误 vscode 消息：

Property 'Google' does not exist on type 'typeof import("/home/abda_react/abdn2/node_modules/next-auth/providers/index")'.ts(2339)

我从 Nextjs 收到的消息：

Failed to compile
./pages/api/auth/[...nextauth].js:2:0
Module not found: Package path ./providers is not exported from package /home/abda_react/abdn2/node_modules/next-auth (see exports field in /home/abda_react/abdn2/node_modules/next-auth/package.json)
  1 | import NextAuth from "next-auth"
> 2 | import Providers from "next-auth/providers"
  3 | 
  4 | export default NextAuth({
  5 |   // Configure one or more authentication providers

Import trace for requested module:

https://nextjs.org/docs/messages/module-not-found

节点模块路径：

node_modules > next-auth > {} package.json > {} exports

 "exports": {
    ".": "./index.js",
    "./jwt": "./jwt/index.js",
    "./react": "./react/index.js",
    "./providers/*": "./providers/*.js"
  },

index.js 文件：

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
var _exportNames = {};
Object.defineProperty(exports, "default", {
  enumerable: true,
  get: function () {
    return _server.default;
  }
});

var _server = _interopRequireDefault(require("./server"));

var _types = require("./server/types");

Object.keys(_types).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
  if (key in exports && exports[key] === _types[key]) return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function () {
      return _types[key];
    }
  });
});

最后，google.js 文件：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Google;

function Google(options) {
  return {
    id: "google",
    name: "Google",
    type: "oauth",
    wellKnown: "https://accounts.google.com/.well-known/openid-configuration",
    authorization: {
      params: {
        scope: "openid email profile"
      }
    },
    idToken: true,
    checks: ["pkce", "state"],

    profile(profile) {
      return {
        id: profile.sub,
        name: profile.name,
        email: profile.email,
        image: profile.picture
      };
    },

    options
  };
}

和 google.d.ts 文件：

import { OAuthConfig, OAuthUserConfig } from "./oauth";
export interface GoogleProfile {
    sub: string;
    name: string;
    email: string;
    picture: string;
}
export default function Google<P extends Record<string, any> = GoogleProfile>(options: OAuthUserConfig<P>): OAuthConfig<P>;

现在，当我使用下面的方法时，它确实起作用了：

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here

希望有人能提供帮助，因为我是 javascript 的初学者，我真的一直在为这件事伤脑筋...

Answer 1

在下一个 auth beta 版本中，您可以首先调用供应商 separately.check 您的版本，然后阅读下一个 auth 文档。

为什么我的导入语句没有提取我需要的功能？

why doesn't my import statement pull the function i need?

javascript

reactjs

next.js

next-auth