adam/vscode-front-matter
1
0 Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-11-03 09:02:19 +01:00
Code Issues 77 Packages Projects Releases Wiki Activity

Issue: Field Group fields cause "Objects are not valid as a React child" on Dashboard #539

New Issue
Closed
opened 2026-10-05 02:51:54 +02:00 by adam · 3 comments
adam commented 2026-10-05 02:51:54 +02:00
Owner
Copy link
Copy source

Describe the bug
I've started using fieldGroups in my Frontmatter config to add a "tag" object, defined in frontmatter.json like this:

"frontMatter.taxonomy.fieldGroups": [
{
	"id": "tag",
	"labelField": "label",
	"fields": [
		{
			"title": "Label",
			"name": "label",
			"type": "string",
			"single": true
		},
		{
			"title": "Color",
			"name": "color",
			"type": "choice",
			"choices": ["primary", "secondary"]
		}
	]
}
]

This is used in a content type called "Work Experience", and the Tags prop is defined like this:

	"frontMatter.taxonomy.contentTypes": [		
		{
			"name": "Work Experience",
			"fields": [
				{
					"title": "Tags",
					"name": "tags",
					"type": "block",
					"fieldGroup": ["tag"]
				}
			]
		},

The UI for adding Tags is displayed correctly, and adding tags through it results in something like this:

tags:
  - label: Svelte
    color: primary
    fieldGroup: tag

However, when after saving the file, the Dashboard immediately crashes. On developer tools, I was able to get the error message:

Objects are not valid as a React child (found: object with keys {label, color, fieldGroup}). If you meant to render a collection of children, use an array instead.

Removing the tags field or leaving it empty ([]) makes the dashboard open again.

To Reproduce
Steps to reproduce the behavior:

  1. Clone this repo (make sure to use the cmsify branch)
  2. Open the Frontmatter Dashboard
  3. The content with the tags is in the cms/work-experiences folder

Expected behavior
I expect the dashboard to open

Desktop (please complete the following information):

  • OS: macOS Sonoma 14.0
**Describe the bug** I've started using fieldGroups in my Frontmatter config to add a "tag" object, defined in frontmatter.json like this: ```json "frontMatter.taxonomy.fieldGroups": [ { "id": "tag", "labelField": "label", "fields": [ { "title": "Label", "name": "label", "type": "string", "single": true }, { "title": "Color", "name": "color", "type": "choice", "choices": ["primary", "secondary"] } ] } ] ``` This is used in a content type called "Work Experience", and the Tags prop is defined like this: ```json "frontMatter.taxonomy.contentTypes": [ { "name": "Work Experience", "fields": [ { "title": "Tags", "name": "tags", "type": "block", "fieldGroup": ["tag"] } ] }, ``` The UI for adding Tags is displayed correctly, and adding tags through it results in something like this: ```yaml tags: - label: Svelte color: primary fieldGroup: tag ``` However, when after saving the file, the Dashboard immediately crashes. On developer tools, I was able to get the error message: > Objects are not valid as a React child (found: object with keys {label, color, fieldGroup}). If you meant to render a collection of children, use an array instead. Removing the tags field or leaving it empty (`[]`) makes the dashboard open again. **To Reproduce** Steps to reproduce the behavior: 1. [Clone this repo](https://github.com/matfantinel/fantinel.dev/tree/cmsify) (make sure to use the cmsify branch) 2. Open the Frontmatter Dashboard 3. The content with the tags is in the cms/work-experiences folder **Expected behavior** I expect the dashboard to open **Desktop (please complete the following information):** - OS: macOS Sonoma 14.0 <!-- github-sync-id:1920055320 -->
adam closed this issue 2026-10-05 02:51:54 +02:00
adam commented 2026-10-05 02:51:55 +02:00
Author
Owner
Copy link
Copy source

Huh, the issue seems to be with the tags/tag name. Just changing the name of the field fixed it. Probably tags is hardcoded in a few places to make the default tags work?

In any case, my issue is solved!

Huh, the issue seems to be with the `tags/tag` name. Just changing the name of the field fixed it. Probably tags is hardcoded in a few places to make the default tags work? In any case, my issue is solved! <!-- github-comment-id:1741623874 -->
adam commented 2026-10-05 02:51:55 +02:00
Author
Owner
Copy link
Copy source

Thank you @matfantinel for opening and letting me know the solution. tags and categories are indeed two field types, which might cause issues, but will have a look if we can make the experience better and not let the CMS crash.

Thank you @matfantinel for opening and letting me know the solution. `tags` and `categories` are indeed two field types, which might cause issues, but will have a look if we can make the experience better and not let the CMS crash. <!-- github-comment-id:1741712645 -->
adam commented 2026-10-05 02:51:56 +02:00
Author
Owner
Copy link
Copy source

@matfantinel I made a change to the code to make sure this cannot happen anymore. It will be testable in the latest beta.

@matfantinel I made a change to the code to make sure this cannot happen anymore. It will be testable in the latest beta. <!-- github-comment-id:1741724913 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#539