diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
index 8d0e59dc9f..6e3587847d 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
@@ -10,14 +10,16 @@
 	export let gridItems: GridItem[]
 </script>
 
-{#each gridItems as gridItem (gridItem.data.id)}
-	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel bind:gridItems bind:component={gridItem.data} />
-	{:else if gridItem.data.type === 'tablecomponent'}
-		<TablePanel bind:component={gridItem.data} />
-	{:else if gridItem.data.subGrids}
-		{#each gridItem.data.subGrids as subGrid}
-			<svelte:self bind:gridItems={subGrid} />
-		{/each}
-	{/if}
-{/each}
+{#if gridItems}
+	{#each gridItems as gridItem (gridItem.data.id)}
+		{#if gridItem.data.id === $selectedComponent}
+			<ComponentPanel bind:gridItems bind:component={gridItem.data} />
+		{:else if gridItem.data.type === 'tablecomponent'}
+			<TablePanel bind:component={gridItem.data} />
+		{:else if gridItem.data.subGrids}
+			{#each gridItem.data.subGrids as subGrid}
+				<svelte:self bind:gridItems={subGrid} />
+			{/each}
+		{/if}
+	{/each}
+{/if}
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 25ecd119f0..129dfac196 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -259,6 +259,9 @@ export function toKebabCase(text: string) {
 }
 
 export function findParent(root: GridItem[], id: string): GridItem | undefined {
+	if (!root) {
+		return undefined
+	}
 	for (const a of root) {
 		if (a.id === id) {
 			return a