Adminjs adding custom reactjs components to my resource on adminjs

Question

I am using adminjs for the first time and I have written my own custom component, but adding it to the resource keeps producing an error that says "You have to implement action component for your Action" Here is my resource:

const {Patient}  = require('./../models/Patient')
const Components = require('./../components/components')

const { Patient } = require('./../models/Patient')
const Components = require('./../components/components')

const PatientResource = {
  resource: Patient,
  options: {
    actions: {
      consultation: {
        actionType: 'record',
        component: Components.MyCustomAction,
        handler: (request, response, context) => {
          const { record, currentAdmin } = context
          return {
            record: record.toJSON(currentAdmin),
            msg: 'Hello world',
          }
        },
      },

      isAccessible: ({ currentAdmin }) => {
        action: if (currentAdmin.role_id === 5) {
          return false
        } else {
          return true
        }
      },
    },

    navigation: 'Manage Patients',
    listProperties: [
      'id',
      'last_name',
      'first_name',
      'sex',
      'marital_status',
      'blood_group',
      'genotype',
      'existing_health_condition',
    ],
  },
}
module.exports = { PatientResource }

And this is my custom component:

import React from 'react'
import { Box, H3 } from '@adminjs/design-system'
import { ActionProps } from 'adminjs'

const MyCustomActionComponent = (props: ActionProps) => {
  const { record } = props

  return (
    <Box flex>
      <Box
        variant='white'
        width={1 / 2}
        boxShadow='card'
        mr='xxl'
        flexShrink={0}
      >
        <H3>Example of a simple page</H3>
        <p>Where you can put almost everything</p>
        <p>like this: </p>
        <p>
          <img
            src='https://i.redd.it/rd39yuiy9ns21.jpg'
            alt='stupid cat'
            width={300}
          />
        </p>
      </Box>
      <p> Or (more likely), operate on a returned record:</p>
      <Box overflowX='auto'> {JSON.stringify(record)}</Box>
    </Box>
  )
}
module.exports = { MyCustomActionComponent }

I tried to add the component to my custom defined action "Consultation", Hence I expected to see a custom page which i have designed using react as in "mycustomAction" above

Answer 1

Basically, you MUST use the ComponentLoader that comes with AdminJS.

I had this same issue until I followed this docs page: https://docs.adminjs.co/ui-customization/writing-your-own-components

According to this guide your components file should look like:

import { ComponentLoader } from 'adminjs'

const componentLoader = new ComponentLoader()

const Components = {
    MyCustomAction: componentLoader.add('MyCustomAction', './my-custom-action'),
    // other custom components
}

export { componentLoader, Components }

Then you must add the componentLoader to the AdminJS config like this:

import { componentLoader } from './components.js'

const admin = new AdminJS({
    componentLoader, // the loader needs to be added here
    // other options
})

Note also:

Files added to ComponentLoader need to expose the component function as a default export.

Which is not the case for the MyCustomAction component file in the original post.