AdminJS自定义仪表盘组件报错：指定文件不存在，请求协助

针对你遇到的"./components/dashboard/dashboard不存在"错误，可从以下几个方向排查解决：

1. 补全文件后缀 #

AdminJS.bundle可能无法自动识别.jsx后缀，尝试在路径中明确添加后缀：

dashboard:{
    component: AdminJS.bundle("./components/dashboard/dashboard.jsx"),
},

2. 确认路径基准 #

AdminJS.bundle的路径是相对于项目启动时的工作目录，而非index.js所在目录。如果你的index.js不在项目根目录，建议用绝对路径避免歧义：

const path = require('path');

// ...
dashboard:{
    component: AdminJS.bundle(path.join(__dirname, './components/dashboard/dashboard.jsx')),
},

若index.js在根目录，对照文件夹结构截图确认components文件夹确实位于根目录下。

3. 使用ComponentLoader管理组件 #

AdminJS官方推荐用ComponentLoader加载自定义组件，能有效规避路径问题：

const { ComponentLoader } = require('adminjs');
const componentLoader = new ComponentLoader();

// 注册自定义仪表盘组件
const CustomDashboard = componentLoader.add('CustomDashboard', './components/dashboard/dashboard.jsx');

const admin = new AdminJS({
    databases: [],
    rootPath: '/admin',
    dashboard:{
        component: CustomDashboard,
    },
    componentLoader, // 必须传入componentLoader
    resources:[UsersResources, GuestResources, SalesResources, FinancesResources]
})

附相关代码 #

自定义仪表盘组件（components/dashboard/dashboard.jsx）：

import React, {useEffect, useState} from 'react'
import {ApiClient} from "adminjs";

const api = new ApiClient();

const Dashboard = () => {
    const [data, setData] = useState({})

    useEffect(() => {
        api.getDashboard().then((response) => {
            setData(response.data)
        })
    }, [])

    return(
        <div>
            <h1>it works!</h1>
        </div>
    )
};

export default Dashboard

文件夹结构参考：

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