bug: Cannot read property 'map' of undefined, exiting...

[ACoolTurtle]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When compiling the schema.ts, containing multiple block components with the same templates I get the error Cannot read property 'map' of undefined, exiting...

Expected Behavior

Schema to be compiled and local client to run.

Steps To Reproduce

Run with given schema

Environment

- Browser: Chrome
- OS: Windows 10
- Node: v15.7.0
- npm: 7.4.3

Your Schema

import { allDirections, allImages } from "./schemaConstants";

import { defineSchema } from "tina-graphql-gateway-cli";
import { generatorComponents } from "./generatorComponents";

export default defineSchema({
	collections: [
		{
			label: "Main Page",
			format: "json",
			name: "page",
			path: "data/page-content",
			templates: [
				{
					label: "Page Template",
					name: "page",
					fields: [
						{
							type: "text",
							name: "slug",
							label: "URL",
							description:
								'The "Slug" of the current page. <strong>The Home Page must be /</strong>.<br><br>A Slug is <strong>the unique identifying part of a web address</strong>, typically at the end of the URL.',
						},
						{
							type: "group",
							name: "seo",
							fields: [
								{
									type: "text",
									name: "title",
									label: "title",
								},
								{
									type: "text",
									name: "description",
									label: "description",
								},
								{
									type: "image",
									name: "image",
									label: "image",
								},
								{
									type: "text",
									name: "lang",
									label: "lang",
								},
								{
									type: "group-list",
									name: "meta",
									label: "meta",
									fields: [
										{
											type: "text",
											name: "name",
											label: "name",
										},
										{
											type: "text",
											name: "content",
											label: "content",
										},
									],
								},
							],
							label: "Search Engine Optimization",
							description:
								"Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page from search engines. SEO targets unpaid traffic rather than direct traffic or paid traffic.",
						},
						{
							type: "group-list",
							label: "Menu Items",
							name: "menuLinks",
							fields: [
								{
									type: "text",
									label: "Title",
									name: "title",
								},
								{
									type: "text",
									label: "Path",
									name: "path",
								},
							],
						},
						{
							name: "components",
							type: "blocks",
							label: "components",
							templates: [
								{
									label: "Carousel Component",
									name: "carousel",
									fields: [
										{
											name: "images",
											type: "group-list",
											label: "Images",
											fields: [
												{
													name: "image",
													type: "image",
													label: "Image",
												},
											],
										},
										{
											name: "height",
											type: "number",
											label: "Height",
											description: "",
										},
										{
											name: "fade",
											type: "toggle",
											label: "Enable Fade",
										},
										{
											name: "fadeTime",
											type: "number",
											description: "",
											label: "Fade Time",
										},
										{
											name: "fadeOnce",
											type: "toggle",
											label: "Fade In Once",
										},
										{
											name: "delay",
											type: "number",
											description: "",
											label: "Fade Delay",
										},
										{
											name: "toggle_fade_direction",
											type: "toggle",
											label: "Toggle Fade Direction",
										},
										{
											name: "direction",
											type: "select",
											options: allDirections,
											label: "Fade Direction",
										},
									],
								},
								{
									label: "Free Style Component",
									name: "free_style",
									fields: [
										{
											name: "markdown",
											type: "textarea",
											label: "Text",
										},
									],
								},
								{
									label: "Title Component",
									name: "title",
									fields: [
										{
											name: "titleText",
											type: "text",
											label: "Title Text",
										},
										{
											name: "bodyMarkdown",
											type: "textarea",
											label: "Text",
										},
										{
											name: "fade",
											type: "toggle",
											label: "Enable Fade",
										},
										{
											name: "toggle_fade",
											type: "toggle",
											label: "Toggle Fade",
										},
										{
											name: "fadeOpts",
											type: "toggle",
											label: "Fade Options",
										},
										{
											name: "fadeTime",
											type: "number",
											description: "",
											label: "Fade Time",
										},
										{
											name: "fadeOnce",
											type: "toggle",
											label: "Fade In Once",
										},
										{
											name: "delay",
											type: "number",
											description: "",
											label: "Fade Delay",
										},
										{
											name: "toggle_fade_direction",
											type: "toggle",
											label: "Toggle Fade Direction",
										},
										{
											name: "direction",
											type: "select",
											options: allDirections,
											label: "Fade Direction",
										},
									],
								},
								{
									label: "Link Grid Component",
									name: "link_grid",
									fields: [
										{
											label: "Grid Items",
											name: "grid",
											type: "group-list",
											fields: [
												{
													type: "blocks",
													name: "titleSide",
													label: "Title Side",
													templates:
														generatorComponents,
												},
												{
													type: "blocks",
													name: "extraSide",
													label: "Image Side",
													templates:
														generatorComponents,
												},
											],
										},
										{
											name: "fade",
											type: "toggle",
											label: "Enable Fade",
										},
										{
											name: "fadeOpts",
											type: "toggle",
											label: "Fade Options",
										},
										{
											name: "fadeTime",
											type: "number",
											description: "",
											label: "Fade Time",
										},
										{
											name: "fadeOnce",
											type: "toggle",
											label: "Fade In Once",
										},
										{
											name: "delay",
											type: "number",
											description: "",
											label: "Fade Delay",
										},
										{
											name: "toggle_fade_direction",
											type: "toggle",
											label: "Toggle Fade Direction",
										},
										{
											name: "direction",
											type: "select",
											options: allDirections,
											label: "Fade Direction",
										},
									],
								},
								{
									label: "Banner Component",
									name: "banner",
									fields: [
										{
											name: "image",
											type: "image",
											label: "Banner Image",
										},
										{
											name: "height",
											type: "number",
											label: "Height",
											description:
												"The height of the banner, relative to device screen.",
										},
										{
											name: "enableCenter",
											type: "toggle",
											label: "Enable content in the center of the Banner",
										},
										{
											name: "centeredContent",
											type: "blocks",
											label: "Banner Content",
											templates: generatorComponents,
										},
										{
											name: "enableOffset",
											type: "toggle",
											label: "Enable content offset from the middle of banner",
										},
										{
											name: "offsetContent",
											type: "blocks",
											label: "Banner Content, offset towards the bottom",
											templates: generatorComponents,
										},
									],
								},
								{
									label: "Section Component",
									name: "section",
									fields: [
										{
											name: "markdown",
											type: "textarea",
											label: "Section Header Content",
										},
										{
											name: "toggle_fade",
											type: "toggle",
											label: "Toggle Fade",
										},
										{
											name: "fade",
											type: "toggle",
											label: "Enable Fade",
										},
										{
											name: "fadeOpts",
											type: "toggle",
											label: "Fade Options",
										},
										{
											name: "fadeTime",
											type: "number",
											description: "",
											label: "Fade Time",
										},
										{
											name: "fadeOnce",
											type: "toggle",
											label: "Fade In Once",
										},
										{
											name: "delay",
											type: "number",
											description: "",
											label: "Fade Delay",
										},
										{
											name: "toggle_fade_direction",
											type: "toggle",
											label: "Toggle Fade Direction",
										},
										{
											name: "direction",
											type: "select",
											options: allDirections,
											label: "Fade Direction",
										},
									],
								},
								{
									label: "Side by Side Component",
									name: "side_by_side",
									fields: [
										{
											name: "left",
											type: "group",
											fields: [
												{
													name: "enable_fade",
													type: "toggle",
													label: "Enable Fade",
												},
												{
													name: "fade",
													type: "toggle",
													label: "Enable Fade",
												},
												{
													name: "fadeOpts",
													type: "toggle",
													label: "Fade Options",
												},
												{
													name: "fadeTime",
													type: "number",
													description: "",
													label: "Fade Time",
												},
												{
													name: "fadeOnce",
													type: "toggle",
													label: "Fade In Once",
												},
												{
													name: "delay",
													type: "number",
													description: "",
													label: "Fade Delay",
												},
												{
													name: "toggle_fade_direction",
													type: "toggle",
													label: "Toggle Fade Direction",
												},
												{
													name: "direction",
													type: "select",
													options: allDirections,
													label: "Fade Direction",
												},
												/*{
													name: "content2",
													type: "blocks",
													label: "Content",
													templates:
														generatorComponents,
												},*/
												{
													name: "enableIcon",
													type: "toggle",
													label: "Enable Icon",
												},
												{
													name: "icon",
													type: "select",
													options: allImages,
													label: "Select Icon",
												},
											],
											label: "Left Side",
											description:
												"Content on the left side of the desktop. On mobile data is collapsed into single column.",
										},
										{
											name: "right",
											type: "group",
											fields: [
												{
													name: "fade",
													type: "toggle",
													label: "Enable Fade",
												},
												{
													name: "enable_fade",
													type: "toggle",
													label: "Enable Fade",
												},
												{
													name: "fadeOpts",
													type: "toggle",
													label: "Fade Options",
												},
												{
													name: "fadeTime",
													type: "number",
													description: "",
													label: "Fade Time",
												},
												{
													name: "fadeOnce",
													type: "toggle",
													label: "Fade In Once",
												},
												{
													name: "delay",
													type: "number",
													description: "",
													label: "Fade Delay",
												},
												{
													name: "toggle_fade_direction",
													type: "toggle",
													label: "Toggle Fade Direction",
												},
												{
													name: "direction",
													type: "select",
													options: allDirections,
													label: "Fade Direction",
												},
												/*{
													name: "content",
													type: "blocks",
													label: "Content",
													templates:
														generatorComponents,
												},*/
												{
													name: "enableIcon",
													type: "toggle",
													label: "Enable Icon",
												},
											],
											label: "Right Field",
											description:
												"Content visible on the right hand side of screen on desktop. Mobile devices will have the content displayed in a single file column",
										},
									],
								},
							],
						},
					],
				},
			],
		},
	],
});

Your GraphQL Query

N/A

Anything else?

import { TinaCloudTemplate } from "tina-graphql-gateway-cli";
import { allImages } from "./schemaConstants";

export const generatorComponents: TinaCloudTemplate[] = [
	{
		label: "Calendly Calendar",
		name: "Calendly",
		fields: [
			{
				name: "url",
				type: "text",
				label: "Calendly URL",
			},
		],
	},
	{
		label: "Text Content",
		name: "Markdown",
		fields: [
			{
				name: "markdown",
				type: "textarea",
				label: "Text",
			},
		],
	},
	{
		label: "YouTube Video",
		name: "Youtube",
		fields: [
			{
				name: "url",
				type: "text",
				label: "Youtube URL",
			},
			{
				name: "title",
				type: "text",
				label: "Title for Video",
			},
		],
	},
	{
		label: "Add Icon",
		name: "DynamicLogo",
		fields: [
			{
				name: "logoName",
				type: "select",
				label: "Icon Name",
				options: allImages,
			},
		],
	},
	{
		label: "Image",
		name: "Image",
		fields: [
			{
				name: "image",
				type: "image",
				label: "Image",
			},
		],
	},
	{
		label: "Grid Title",
		name: "GridTitle",
		fields: [
			{
				name: "titleText",
				type: "textarea",
				label: "Title",
			},
			{
				name: "description",
				type: "textarea",
				label: "Description",
			},
			{
				name: "link",
				type: "text",
				label: "URL to go to",
			},
			{
				name: "linkText",
				type: "text",
				label: "Text to be on button",
			},
		],
	},
	{
		label: "Image Link",
		name: "ImageLink",
		fields: [
			{
				name: "link",
				type: "text",
				label: "URL to go to",
			},
			{
				name: "label",
				type: "textarea",
				label: "Accessability Label",
			},
			{
				name: "image",
				type: "image",
				label: "Image",
			},
		],
	},
	{
		label: "Link Button",
		name: "LinkButton",
		fields: [
			{
				name: "link",
				type: "text",
				label: "URL to go to",
			},
			{
				name: "linkText",
				type: "textarea",
				label: "Text to be on button",
			},
			{
				name: "internalLink",
				type: "toggle",
				label: "Toggle internal",
				description: "Enable if the url is within the website",
			},
		],
	},
];

[ACoolTurtle]

The issue appears to be tagged to blocks being within a group-list

[DirtyF]

Curious to see if the upcoming update on primitive types helps with this. We discussed the ability to define shared templates (aka an SEO template that could be used in pages, articles, etc.) that might leverage this issue.

[ACoolTurtle]

@DirtyF Looks interesting, I would love to test that out

[logan-anderson]

@ACoolTurtle more info on the changes can be found here: tinacms/tinacms#1898

New docs can be found here: https://tina.io/docs/tinacms-reference/