adminjs - customize resource component does not render

1.3k Views Asked by At

I am having trouble to override the rendering of customized resource. The custom component was working before using adminjs 6.0.0 I am getting error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of 'BasePropertyComponent'.
I tried following the example in the documentation https://docs.adminjs.co/adminjs_src_frontend_components_property-type_base-property-props.ts.html My ServiceSubCategory Model Below

'use strict';

const AdminJS = require('adminjs')
const db = require("../index");

const ServiceSubCategory = db.sequelize.define("service_sub_categories", {
  name_en: {
    type: db.Sequelize.STRING,
    allowNull: false,
  },
  name_cn: {
    type: db.Sequelize.STRING,
    allowNull: false,
  },
  name_zh: {
    type: db.Sequelize.STRING,
    allowNull: false,
  },
  parent_service_id: {
    type: db.Sequelize.INTEGER,
    allowNull: false,
  },

});

const options = {
  properties: {
    parent_service_id: {
      components: {
        list: AdminJS.bundle('./../../components/admin/service_sub_categories/service_sub_categories_list_parent_category.jsx'),
        show: AdminJS.bundle('./../../components/admin/service_sub_categories/service_sub_categories_show_parent_category'),
        edit: AdminJS.bundle('./../../components/admin/service_sub_categories/service_sub_categories_edit_parent_category.jsx')
      },
    },
  },
};

module.exports = {
  options,
  resource: ServiceSubCategory,
};

Below is my show component for parent_service_id

import React from 'react'
import { ValueGroup } from '@adminjs/design-system'

const ServiceSubCategoryShowParentCategory = props => {
    const { record, property } = props
    const value = record.populated.parent_service_id.params.id;
    const valueLabel = record.populated.parent_service_id.params.name_en;
    return (
        <ValueGroup label={property.label}>
            <a href={'/admin/resources/service_categories/records/'+value+'/show'}>{valueLabel}</a>
        </ValueGroup>
    )
}

export {
    ServiceSubCategoryShowParentCategory as default,
    ServiceSubCategoryShowParentCategory,
}

enter image description here

0

There are 0 best solutions below