1

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

ImTheRealOne
  • 57
  • 1
  • 6
  • It seems like you didn't add the `.jsx` extension in the `show` component path. Did u do this? – Sudet Jul 27 '22 at 09:09
  • Or you might forgot to upgrade `design-system` package to new version as described here: https://github.com/SoftwareBrothers/adminjs/blob/master/UPGRADE-6.0.md – Sudet Jul 27 '22 at 09:20
  • 1
    AdminJS v6 requires @adminjs/design-system v3+, have you updated that as well? – dziraf Jul 27 '22 at 09:20
  • @Sudet I have tried with and without the .jsx extension but it still shows the same error. I was trying someone mentioned on the slack channel to use without the .jsx. – ImTheRealOne Jul 27 '22 at 17:56
  • @dziraf I have updated the packages. This is my package.json `"dependencies": { "@adminjs/design-system": "^3.0.0", "@adminjs/express": "^5.0.0", "@adminjs/sequelize": "^3.0.0", .... "adminjs": "^6.0.3", ` – ImTheRealOne Jul 27 '22 at 18:01
  • can you check if a simple component just with `return null` will also throw an error? – dziraf Jul 28 '22 at 16:26

0 Answers0