diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 8d79de2ac4..a86d43c676 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -138,7 +138,7 @@
 
   // Derive definition properties which can all be optional, so need to be
   // coerced to booleans
-  $: invalidSettings = $builderStore.componentErrors[instance._id]
+  $: invalidSettings = instance?._meta?.errors
   $: hasChildren = !!definition?.hasChildren
   $: showEmptyState = definition?.showEmptyState !== false
   $: hasMissingRequiredSettings = missingRequiredSettings?.length > 0
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index bc87216660..491d8d4236 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -42,6 +42,14 @@ const createScreenStore = () => {
         if ($builderStore.layout) {
           activeLayout = $builderStore.layout
         }
+
+        // Attach meta
+        const errors = $builderStore.componentErrors || {}
+        const attachComponentMeta = component => {
+          component._meta = { errors: errors[component._id] || [] }
+          component._children?.forEach(attachComponentMeta)
+        }
+        attachComponentMeta(activeScreen.props)
       } else {
         // Find the correct screen by matching the current route
         screens = $appStore.screens || []