From d7e31901626734ce43cd9161971d9811b6d5c483 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Sun, 13 Aug 2023 11:05:57 +0100
Subject: [PATCH] feat: gracefully fallback if component definition doesn't
 exist

---
 packages/core/components/Puck/index.tsx   | 6 +++++-
 packages/core/components/Render/index.tsx | 8 ++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index b45c7f31b7..ea2edad903 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -409,7 +409,11 @@ export function Puck({
                                   editMode: true,
                                 })
                               ) : (
-                                <div>No configuration for {item.type}</div>
+                                <div
+                                  style={{ padding: 48, textAlign: "center" }}
+                                >
+                                  No configuration for {item.type}
+                                </div>
                               )}
                             </div>
                           </DraggableComponent>
diff --git a/packages/core/components/Render/index.tsx b/packages/core/components/Render/index.tsx
index d399c43219..2251d85fd6 100644
--- a/packages/core/components/Render/index.tsx
+++ b/packages/core/components/Render/index.tsx
@@ -4,9 +4,13 @@ import { Config, Data } from "../../types/Config";
 
 export function Render({ config, data }: { config: Config; data: Data }) {
   const children = data.content.map((item) => {
-    const Component = config.components[item.type].render;
+    const Component = config.components[item.type]?.render;
 
-    return <Component key={item.props.id} {...item.props} />;
+    if (Component) {
+      return <Component key={item.props.id} {...item.props} />;
+    }
+
+    return null;
   });
 
   if (config.root) {