NextAuth导入EmailProvider报模块路径未导出错误

问题场景 #

在项目中基于NextAuth搭建身份认证能力，尝试从next-auth/providers路径导入EmailProvider，在NextAuth配置的providers数组中调用该导入项时，无法正常关联已导入的EmailProvider实例，同时触发模块解析失败报错。

问题相关实现代码 #

import NextAuth from "next-auth/next";
import { EmailProvider } from "next-auth/providers";
import nodemailer from "nodemailer"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient()
export default NextAuth({
    providers: [
        EmailProvider({
            server: {
                host: process.env.NEXT_PUBLIC_EMAIL_SERVER_HOST,
                port: process.env.NEXT_PUBLIC_EMAIL_SERVER_PORT,
                auth: {
                    user: process.env.NEXT_PUBLIC_EMAIL_SERVER_USER,
                    pass: process.env.NEXT_PUBLIC_EMAIL_SERVER_PASSWORD,
                },
            },
            from: process.env.NEXT_PUBLIC_EMAIL_FROM,
            maxAge: 10 * 60,
        })
    ],
    adapter: PrismaAdapter(prisma)
})

运行时完整报错 #

Module not found: Package path ./providers is not exported from package D:\nextautht\supa-vacation-start\supa-vacation-start\node_modules\next-auth (see exports field in D:\nextautht\supa-vacation-start\supa-vacation-start\node_modules\next-auth\package.json)
  1 | import NextAuth from "next-auth/next";
> 2 | import { EmailProvider } from "next-auth/providers";
  3 | import nodemailer from "nodemailer"
  4 | import { PrismaAdapter } from "@next-auth/prisma-adapter"
  5 | import { PrismaClient } from "@prisma/client";

故障原因 #

NextAuth v4及以上版本调整了官方Provider的导出规则，不再开放next-auth/providers根路径的批量导出入口，该路径已经被从包的package.json exports字段中移除，所有官方Provider都改为独立子路径单独导出，原有导入路径无法被模块打包器识别，因此触发模块找不到的报错。

修复步骤 #

• 替换EmailProvider的导入语句，将原命名导入从next-auth/providers的写法，改为默认导入独立路径的写法：
  import EmailProvider from "next-auth/providers/email";
• 移除所有服务端敏感环境变量的NEXT_PUBLIC_前缀：带该前缀的环境变量会被注入到客户端侧代码，邮件服务账号、密码这类敏感信息会直接泄露给前端访问者，需要将相关变量名改为不带该前缀的形式，仅在服务端读取使用。
• 删除未使用的nodemailer导入：NextAuth的EmailProvider内部已经封装了nodemailer的邮件发送逻辑，不需要额外手动导入。

修复后完整代码 #

import NextAuth from "next-auth/next";
import EmailProvider from "next-auth/providers/email";
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient()
export default NextAuth({
    providers: [
        EmailProvider({
            server: {
                host: process.env.EMAIL_SERVER_HOST,
                port: process.env.EMAIL_SERVER_PORT,
                auth: {
                    user: process.env.EMAIL_SERVER_USER,
                    pass: process.env.EMAIL_SERVER_PASSWORD,
                },
            },
            from: process.env.EMAIL_FROM,
            maxAge: 10 * 60,
        })
    ],
    adapter: PrismaAdapter(prisma)
})

内容的提问来源于stack exchange，提问作者risky last