[Bug]: Error when rendering nested objects with mongodb

Contact Details

No response

What happened?

When attempting to open a resource in AdminJS that contains reference to another object that has nested object in its schema, such as 'hiddenName' or 'hiddenDescription', I encountered the following error:

Javascript Error Error: Objects are not valid as a React child (found: object with keys {ar, en}). If you meant to render a collection of children, use an array instead. See development console for more details...

i.e: model 1 has reference to model 2

model 2 has a nested object inside it for example hiddenName: {en: String, ar: String}, you can see the error in attach image Screenshot_34

video for the issue:

https://github.com/SoftwareBrothers/adminjs/assets/64564291/4c4ddc93-e52e-4690-b9a3-25489c35a294

Bug prevalence

Every time I open a resource from navigation, or trying to edit a specific document

AdminJS dependencies version

    "adminjs": "^7.2.1",
    "@adminjs/express": "^6.0.0",
    "@adminjs/mongoose": "^4.0.0",
    "mongoose": "^7.4.0",
    "express": "^4.18.2",

What browsers do you see the problem on?

Chrome

Relevant log output

global.bundle.js:19146 Uncaught Error: Objects are not valid as a React child (found: object with keys {ar, en}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (global.bundle.js:19146:10)
    at reconcileChildFibers (global.bundle.js:20087:8)
    at reconcileChildren (global.bundle.js:23421:29)
    at updateHostComponent (global.bundle.js:24178:4)
    at beginWork (global.bundle.js:25872:15)
    at HTMLUnknownElement.callCallback (global.bundle.js:8426:15)
    at Object.invokeGuardedCallbackDev (global.bundle.js:8475:17)
    at invokeGuardedCallback (global.bundle.js:8539:32)
    at beginWork$1 (global.bundle.js:31690:8)
    at performUnitOfWork (global.bundle.js:30799:13)
---
reference-value.js:28 Uncaught TypeError: Cannot read properties of undefined (reading 'find')
    at ReferenceValue (reference-value.js:28:44)
    at renderWithHooks (global.bundle.js:20564:19)
    at mountIndeterminateComponent (global.bundle.js:24328:14)
    at beginWork (global.bundle.js:25841:17)
    at HTMLUnknownElement.callCallback (global.bundle.js:8426:15)
    at Object.invokeGuardedCallbackDev (global.bundle.js:8475:17)
    at invokeGuardedCallback (global.bundle.js:8539:32)
    at beginWork$1 (global.bundle.js:31690:8)
    at performUnitOfWork (global.bundle.js:30799:13)
    at workLoopSync (global.bundle.js:30705:6)

global.bundle.js:22946 The above error occurred in the <a> component:

    at a
    at LinkWithRef (http://localhost:6001/admin/frontend/assets/global.bundle.js:43113:9)
    at O (http://localhost:6001/admin/frontend/assets/design-system.bundle.js:19143:9)
    at ReferenceValue (http://localhost:6001/admin/frontend/assets/app.bundle.js:17846:6)
    at ....... // there is more like 30 lines 

---
global.bundle.js:22946 The above error occurred in the <ReferenceValue> component:

    at ReferenceValue (http://localhost:6001/admin/frontend/assets/app.bundle.js:17846:6)
    at WrapperComponent
    at List$2
    at WrapperComponent
    at section
    at O (http://localhost:6001/admin/frontend/assets/design-system.bundle.js:19143:9)
    at ErrorBoundary (http://localhost:6001/admin/frontend/assets/app.bundle.js:7799:6)
    at BasePropertyComponent (http://localhost:6001/admin/frontend/assets/app.bundle.js:20368:16)
    at td
    at O (http://localhost:6001/admin/frontend/assets/design-system.bundle.js:19143:9)
    at tr
    at O (http://localhost:6001/admin/frontend/assets/design-system.bundle.js:19143:9)
    at RecordInList (http://localhost:6001/admin/frontend/assets/app.bundle.js:20837:6)
    at WrapperComponent
    at tbody
    at O (http://localhost:6001/admin/frontend/assets/design-system.bundle.js:19143:9)
    at table
    at O (http://localhost:6001/admin/frontend/assets/design-system.bundle.js:19143:9)
    at RecordsTable (http://localhost:6001/admin/frontend/assets/app.bundle.js:21176:6)
    at WrapperComponent
    at section
    at O (http://localhost:6001/admin/frontend/assets/design-system.bundle.js:19143:9)
    at List (http://localhost:6001/admin/frontend/assets/app.bundle.js:21227:4)
    at WrapperComponent
    at ErrorBoundary (http://localhost:6001/admin/frontend/assets/app.bundle.js:7799:6)
    at BaseActionComponent (http://localhost:6001/admin/frontend/assets/app.bundle.js:21523:6)
    at section
    at O (http://localhost:6001/admin/frontend/assets/design-system.bundle.js:19143:9)
    at ResourceAction (http://localhost:6001/admin/frontend/assets/app.bundle.js:23010:31)
    at ConnectFunction (http://localhost:6001/admin/frontend/assets/global.bundle.js:36315:88)
    at WrapperComponent
    at RenderedRoute (http://localhost:6001/admin/frontend/assets/global.bundle.js:41833:9)
    at RenderedRoute (http://localhost:6001/admin/frontend/assets/global.bundle.js:41833:9)
    at Routes (http://localhost:6001/admin/frontend/assets/global.bundle.js:42356:9)
    at section
    at O (http://localhost:6001/admin/frontend/assets/design-system.bundle.js:19143:9)
    at section
    at O (http://localhost:6001/admin/frontend/assets/design-system.bundle.js:19143:9)
    at App (http://localhost:6001/admin/frontend/assets/app.bundle.js:23073:52)
    at WrapperComponent
    at Suspense
    at Router (http://localhost:6001/admin/frontend/assets/global.bundle.js:42288:19)
    at BrowserRouter (http://localhost:6001/admin/frontend/assets/global.bundle.js:43014:9)
    at I18nextProvider (http://localhost:6001/admin/frontend/assets/app.bundle.js:1169:20)
    at Le (http://localhost:6001/admin/frontend/assets/design-system.bundle.js:19063:18)
    at Provider$1 (http://localhost:6001/admin/frontend/assets/global.bundle.js:36534:5)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Relevant code that's giving you issues

// Store model schema
  {
    hiddenName: {
      type: {
        ar: String,
        en: String,
      },
      _id: false,
    },
    image: {
      type: String,
    },
    deliveryPrice: {
      type: String,
      trim: true,
    },
    hiddenCategories: {
      type: [{ en: String, ar: String }],
    },
    tabs: {
      type: [mongoose.Schema.Types.ObjectId],
      ref: "Tab",
    },
    __v: {
      type: Number,
      select: false,
    },
  },

// Tab model schema
{
  hiddenName: {
    type: {
      ar: String,
      en: String,
    },
    _id: false,
  },
  store: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "Store",
    required: true,
  },
  products: {
    type: [mongoose.Schema.Types.ObjectId],
    ref: "Product",
    default: [],
  },
  __v: {
    type: Number,
    select: false,
  },
}

// Product model schema
{
  hiddenName: {
    type: {
      ar: String,
      en: String,
    },
    _id: false,
  },
  hiddenDescription: {
    type: {
      ar: String,
      en: String,
    },
    _id: false,
  },
  image: {
    type: String,
  },
  price: {
    type: String,
    trim: true,
  },
  tab: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "Tab",
    required: true,
  },
  store: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "Store",
    required: true,
  },
  __v: {
    type: Number,
    select: false,
  },
}

SoftwareBrothers / adminjs