Payload CMS集成Passport魔法登录遇Webpack polyfill错误求助

问题场景 #

想要给Payload管理面板添加魔法登录功能，但官方文档对Passport策略的实现说明不够清晰，公开Demo里也完全没提相关内容。用npx create-payload-app创建博客模板项目后，安装了passport和passport-magic-login包，修改Users.ts配置Passport的魔法登录策略，结果运行时抛出一堆Webpack与polyfill相关的错误，项目无法正常启动。

配置代码（Users.ts） #

import { CollectionConfig } from "payload/types";

import MagicLoginStrategy from "passport-magic-login";

const sendEmail = (a, b, c, d) => {
  console.log("sendEmail");
  console.log(a, b, c, d);
};

const verify = (a, b) => {
  console.log("verify");
  console.log(a, b);
};

const Users: CollectionConfig = {
  slug: "users",
  auth: {
    tokenExpiration: 7200,
    maxLoginAttempts: 5,
    lockTime: 600 * 1000,
    strategies: [
      {
        strategy: new MagicLoginStrategy({
          secret: "my-secret",
          callbackUrl: `api/auth/magiclink/callback`,
          sendMagicLink: async (destination, href, _, req) => {
            await sendEmail(destination, href, _, req);
          },
          verify: async (payload, callback) => {
            verify(payload, callback);
          },
        }),
      },
    ],
  },
  admin: {
    useAsTitle: "email",
  },
  access: {
    read: () => true,
  },
  fields: [
    // Email added by default
    {
      name: "name",
      type: "text",
    },
  ],
};

export default Users;

错误日志 #

ERROR in ./node_modules/jwa/index.js 5:11-26
模块未找到：错误：无法在 '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jwa' 中解析 'util'

重大变更：Webpack 5 之前默认会包含 Node.js 核心模块的 polyfill，现在不再如此。请确认你是否需要该模块并配置对应的 polyfill。

如果你需要添加 polyfill，请执行以下操作：
        - 添加 fallback 配置：`resolve.fallback: { "util": require.resolve("util/") }`
        - 安装 'util' 包
如果你不需要添加 polyfill，可以使用空模块配置：
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/data-stream.js 3:13-30
模块未找到：错误：无法在 '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib' 中解析 'stream'

重大变更：Webpack 5 之前默认会包含 Node.js 核心模块的 polyfill，现在不再如此。请确认你是否需要该模块并配置对应的 polyfill。

如果你需要添加 polyfill，请执行以下操作：
        - 添加 fallback 配置：`resolve.fallback: { "stream": require.resolve("stream-browserify") }`
        - 安装 'stream-browserify' 包
如果你不需要添加 polyfill，可以使用空模块配置：
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/data-stream.js 4:11-26
模块未找到：错误：无法在 '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib' 中解析 'util'

重大变更：Webpack 5 之前默认会包含 Node.js 核心模块的 polyfill，现在不再如此。请确认你是否需要该模块并配置对应的 polyfill。

如果你需要添加 polyfill，请执行以下操作：
        - 添加 fallback 配置：`resolve.fallback: { "util": require.resolve("util/") }`
        - 安装 'util' 包
如果你不需要添加 polyfill，可以使用空模块配置：
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/sign-stream.js 5:13-30
模块未找到：错误：无法在 '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib' 中解析 'stream'

重大变更：Webpack 5 之前默认会包含 Node.js 核心模块的 polyfill，现在不再如此。请确认你是否需要该模块并配置对应的 polyfill。

如果你需要添加 polyfill，请执行以下操作：
        - 添加 fallback 配置：`resolve.fallback: { "stream": require.resolve("stream-browserify") }`
        - 安装 'stream-browserify' 包
如果你不需要添加 polyfill，可以使用空模块配置：
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/sign-stream.js 7:11-26
模块未找到：错误：无法在 '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib' 中解析 'util'

重大变更：Webpack 5 之前默认会包含 Node.js 核心模块的 polyfill，现在不再如此。请确认你是否需要该模块并配置对应的 polyfill。

如果你需要添加 polyfill，请执行以下操作：
        - 添加 fallback 配置：`resolve.fallback: { "util": require.resolve("util/") }`
        - 安装 'util' 包
如果你不需要添加 polyfill，可以使用空模块配置：
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/verify-stream.js 5:13-30
模块未找到：错误：无法在 '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib' 中解析 'stream'

重大变更：Webpack 5 之前默认会包含 Node.js 核心模块的 polyfill，现在不再如此。请确认你是否需要该模块并配置对应的 polyfill。

如果你需要添加 polyfill，请执行以下操作：
        - 添加 fallback 配置：`resolve.fallback: { "stream": require.resolve("stream-browserify") }`
        - 安装 'stream-browserify' 包
如果你不需要添加 polyfill，可以使用空模块配置：
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/verify-stream.js 7:11-26
模块未找到：错误：无法在 '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib' 中解析 'util'

重大变更：Webpack 5 之前默认会包含 Node.js 核心模块的 polyfill，现在不再如此。请确认你是否需要该模块并配置对应的 polyfill。

如果你需要添加 polyfill，请执行以下操作：
        - 添加 fallback 配置：`resolve.fallback: { "util": require.resolve("util/") }`
        - 安装 'util' 包
如果你不需要添加 polyfill，可以使用空模块配置：
        resolve.fallback: { "util": false }

webpack 编译失败，共7个错误

解决步骤 #

这些错误源于Webpack 5不再默认提供Node.js核心模块的polyfill，而passport-magic-login依赖的jwa、jws包用到了util和stream这两个Node核心模块。按以下步骤修复：

1. 安装所需的polyfill包

npm install util stream-browserify

2. 修改Payload配置，添加Webpack fallback规则
   在项目根目录的payload.config.ts（没有则创建）中添加Webpack配置：

import { buildConfig } from 'payload/config';
import path from 'path';
import Users from './collections/Users';

export default buildConfig({
  admin: {
    webpack: (config) => {
      return {
        ...config,
        resolve: {
          ...config.resolve,
          fallback: {
            ...config.resolve?.fallback,
            util: require.resolve('util/'),
            stream: require.resolve('stream-browserify'),
          },
        },
      };
    },
  },
  collections: [Users],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts'),
  },
});

3. 重启开发服务

npm run dev

完成以上步骤后，Webpack就能正确解析缺失的核心模块，项目可正常启动，继续配置魔法登录的后续逻辑。

内容的提问来源于stack exchange，提问作者Mathias Johannsen