AdminJS 6.6.5自定义组件报错：ComponentLoader未找到及文件不存在

遇到的问题 #

1. 初始创建自定义组件时出现报错：Adminjs ComponentLoader not found
2. 调整ComponentLoader导入方式后，出现新报错：Trying to bundle file 'file:/Users/Josip/WebstormProjects/ferry-backend/components/dashboard.jsx' but it doesn't exist

问题分析与解决方案 #

1. 组件路径验证 #

首先确认../components/dashboard.jsx路径对应的文件真实存在：

• 你的admin/index.js位于项目的ferry-backend/admin/目录下，../components/对应的是项目根目录下的ferry-backend/components/文件夹
• 若该路径下没有dashboard.jsx，要么创建该文件，要么调整为正确的相对路径；也可以使用绝对路径避免路径歧义：

  // 先导入path模块
  import path from 'path';
  // 使用绝对路径
  MyDashboard: componentLoader.override('Dashboard', path.resolve(__dirname, '../components/dashboard.jsx'))
  

2. ComponentLoader导入规范 #

AdminJS 6.x中ComponentLoader的两种正确导入方式均有效：

// 方式1：直接解构
import { ComponentLoader } from 'adminjs';
// 方式2：从AdminJS对象解构
import AdminJS from 'adminjs';
const { ComponentLoader } = AdminJS;

同时执行npm list adminjs确认项目已正确安装6.6.5版本的AdminJS依赖。

3. 修正自定义组件挂载位置 #

你当前将自定义Dashboard组件挂载到了components.edit字段，但override的是首页仪表盘组件，需调整到components.dashboard字段：

const admin = new AdminJS({
    databases: [],
    rootPath: '/admin',
    resources:[UsersResources, GuestResources, SalesResources, FinancesResources],
    components:{
        dashboard: Components.MyDashboard // 改为dashboard字段
    },
    componentLoader
})

4. 确保自定义组件符合规范 #

dashboard.jsx需满足AdminJS的React组件要求，示例结构：

import React from 'react';

const MyDashboard = (props) => {
    return (
        <div>
            <h1>自定义仪表盘</h1>
            {/* 自定义内容区域 */}
        </div>
    );
};

export default MyDashboard;

错误截图说明 #

截图显示核心错误信息：Trying to bundle file 'file:/Users/Josip/WebstormProjects/ferry-backend/components/dashboard.jsx' but it doesn't exist，明确指向指定路径的组件文件不存在或路径错误。

内容的提问来源于stack exchange，提问作者Josip Marić