Adminjs given file doesnt exist

Question

I have been trying to make my custom component for Adminjs dashboard. My project is made in Nodejs and Adminjs can be customized in React, so I created dashboard.jsx file inside components/dashboard folders, but when I implement that in Adminjs.bundle I get given file "./components/dashboard/dashboard doesn't exist". It just doesn't want to find the path to my component. please help!

i Have opened a new question with ComponentLoader: Adminjs ComponentLoader not found

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

index.js:

AdminJS.registerAdapter(AdminJSSequelize)
const admin = new AdminJS({
    databases: [],
    rootPath: '/admin',
    dashboard:{
        component: AdminJS.bundle("./components/dashboard/dashboard"),
    },
    resources:[UsersResources, GuestResources, SalesResources, FinancesResources]

})

Answer 1

Try replacing ./components/dashboard/dashboard with ./components/dashboard/dashboard.jsx.

I have only experienced a bit, so I'm not sure if that is the problem.

Answer 2

Solution for this case is:

AdminJS.registerAdapter(AdminJSSequelize)
const admin = new AdminJS({
    databases: [],
    rootPath: '/admin',
    dashboard:{
        component: AdminJS.bundle(path.join(process.cwd(),"./components/dashboard/dashboard")),
    },
    resources:[UsersResources, GuestResources, SalesResources, FinancesResources]

})

However a new version of Adminjs came out and .bundle is depreciated, and you should use ComponentLoader instead which doesn't work for me. Please check my problem here: Adminjs ComponentLoader not found