AdminJS 6.0.0自定义资源组件无法渲染报错求助

升级至AdminJS 6.0.0后，自定义资源的渲染覆盖功能出现问题，此前正常运行的自定义组件现在抛出以下错误：

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'

相关代码及配置 #

ServiceSubCategory 模型配置

'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,
};

parent_service_id 对应的Show组件代码

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,
}

错误截图

问题原因及解决方案 #

核心问题

模型配置中parent_service_id的show组件路径缺失.jsx后缀，AdminJS无法正确定位组件文件，导致加载失败返回undefined，触发渲染错误。

修复步骤

1. 补全组件文件后缀
   修改模型配置中show组件的bundle路径，添加.jsx后缀：

   show: AdminJS.bundle('./../../components/admin/service_sub_categories/service_sub_categories_show_parent_category.jsx')
   

2. 验证组件导出
   当前组件同时导出了默认和命名导出，AdminJS的bundle方法默认会加载默认导出，这部分是正常的。如果后续仍有问题，可以尝试简化导出语句，只保留默认导出：

   export default ServiceSubCategoryShowParentCategory;
   

3. 清理缓存并重启服务
   修改配置后，清理AdminJS的缓存（如果有），重新启动服务，确保新配置生效。

内容的提问来源于stack exchange，提问作者ImTheRealOne