diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 23ba364dfb..fe66a7fe35 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -16,11 +16,14 @@
   const componentStore = writable({})
   setContext("component", componentStore)
 
+  // Enrich component props
+  let enrichedProps
+  $: enrichComponentProps(definition, $dataContext, $bindingStore)
+
   // Extract component definition info
   $: constructor = getComponentConstructor(definition._component)
   $: children = definition._children
   $: id = definition._id
-  $: enrichedProps = enrichProps(definition, $dataContext, $bindingStore)
   $: styles = definition._styles
 
   // Allow component selection in the builder preview if we're previewing a
@@ -38,6 +41,11 @@
     return name === "screenslot" ? Router : ComponentLibrary[name]
   }
 
+  // Enriches any string component props using handlebars
+  const enrichComponentProps = async (definition, context, bindingStore) => {
+    enrichedProps = await enrichProps(definition, context, bindingStore)
+  }
+
   // Returns a unique key to let svelte know when to remount components.
   // If a component is selected we want to remount it every time any props
   // change.
@@ -47,7 +55,7 @@
   }
 </script>
 
-{#if constructor}
+{#if constructor && enrichedProps}
   <svelte:component this={constructor} {...enrichedProps}>
     {#if children && children.length}
       {#each children as child (getChildKey(child._id))}