AdminJS中PasswordEditComponent未打包错误及用户资源配置求助

错误核心原因 #

这个报错是因为AdminJS的默认密码组件未正确注册到ComponentLoader实例，或是在资源配置中引用组件的方式有误。

分步修复方案 #

1. 先确认依赖版本兼容性 #

检查package.json中AdminJS相关依赖的版本，不兼容的版本会导致组件加载失败，建议使用官方推荐的版本组合：

{
  "dependencies": {
    "adminjs": "^7.0.0",
    "@adminjs/express": "^6.1.0",
    "@adminjs/mongoose": "^4.1.0",
    // 其他项目依赖...
  }
}

如果版本不对，执行npm install重新安装适配的依赖包。

2. 正确初始化ComponentLoader并注册密码组件 #

在你的index.ts（AdminJS初始化入口文件）中，确保ComponentLoader正确配置并传入AdminJS实例：

import AdminJS from 'adminjs';
import * as AdminJSExpress from '@adminjs/express';
import * as AdminJSMongoose from '@adminjs/mongoose';
import User from './models/User'; // 替换成你的User模型路径
import { ComponentLoader } from 'adminjs';

// 注册Mongoose适配器
AdminJS.registerAdapter({
  Resource: AdminJSMongoose.Resource,
  Database: AdminJSMongoose.Database,
});

// 初始化组件加载器
const componentLoader = new ComponentLoader();

// 手动注册AdminJS默认的密码编辑组件
const PasswordEditComponent = componentLoader.add(
  'PasswordEditComponent',
  require('adminjs/lib/components/password-edit').default
);

// 初始化AdminJS
const adminJs = new AdminJS({
  componentLoader, // 必须传入componentLoader
  resources: [
    {
      resource: User,
      options: {
        properties: {
          password: {
            type: 'password',
            // 指定编辑视图使用密码组件
            components: {
              edit: PasswordEditComponent,
            },
            // 控制密码字段在各视图的显示状态
            isVisible: {
              list: false, // 列表页隐藏
              edit: true, // 编辑页显示
              show: false, // 详情页隐藏
              filter: false, // 筛选页隐藏
            },
          },
          // 其他用户字段配置...
        },
      },
    },
  ],
});

3. 若使用单独的user.resource.ts配置文件 #

如果用户资源配置抽离到了user.resource.ts，要确保将componentLoader传入并正确引用组件：

// user.resource.ts
import { ResourceOptions } from 'adminjs';
import { ComponentLoader } from 'adminjs';

export const UserResourceOptions = (componentLoader: ComponentLoader): ResourceOptions => ({
  properties: {
    password: {
      type: 'password',
      components: {
        edit: componentLoader.get('PasswordEditComponent'), // 使用已注册的组件
      },
      isVisible: {
        list: false,
        edit: true,
        show: false,
        filter: false,
      },
    },
    // 其他字段配置...
  },
});

然后在index.ts中引入并使用：

// index.ts
import { UserResourceOptions } from './user.resource';

// ...之前的初始化代码

const adminJs = new AdminJS({
  componentLoader,
  resources: [
    {
      resource: User,
      options: UserResourceOptions(componentLoader),
    },
  ],
});

4. 额外优化：密码加密处理 #

在保存用户密码时，建议添加加密逻辑（比如用bcrypt），避免明文存储：

// 在User模型中添加预保存钩子
import bcrypt from 'bcrypt';

User.pre('save', async function(next) {
  if (!this.isModified('password')) return next();
  this.password = await bcrypt.hash(this.password, 10);
  next();
});

// 或者在AdminJS的操作钩子中处理
const adminJs = new AdminJS({
  // ...其他配置
  resources: [
    {
      resource: User,
      options: {
        // ...字段配置
        actions: {
          edit: {
            before: async (request) => {
              // 只有修改密码时才加密，避免覆盖原有加密密码
              if (request.payload.password) {
                request.payload.password = await bcrypt.hash(request.payload.password, 10);
              } else {
                delete request.payload.password;
              }
              return request;
            },
          },
          new: {
            before: async (request) => {
              request.payload.password = await bcrypt.hash(request.payload.password, 10);
              return request;
            },
          },
        },
      },
    },
  ],
});

常见排查点 #

• 确认componentLoader被正确传入AdminJS实例和资源配置
• 检查组件导入路径，AdminJS版本不同可能导致默认组件路径变化
• 清除node_modules后重新安装依赖，排除依赖冲突问题

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