Add optional chaining to all current asset references to account for nullish values

packages/builder/src/builderStore/dataBinding.js

@@ -126,7 +126,7 @@ export const getDatasourceForProvider = (asset, component) => {
   if (dataProviderSetting) {
     const settingValue = component[dataProviderSetting.key]
     const providerId = extractLiteralHandlebarsID(settingValue)
-    const provider = findComponent(asset.props, providerId)
+    const provider = findComponent(asset?.props, providerId)
     return getDatasourceForProvider(asset, provider)
   }
 
@@ -458,7 +458,7 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
     // Determine the entity which backs this datasource.
     // "provider" datasources are those targeting another data provider
     if (type === "provider") {
-      const component = findComponent(asset.props, datasource.providerId)
+      const component = findComponent(asset?.props, datasource.providerId)
       const source = getDatasourceForProvider(asset, component)
       return getSchemaForDatasource(asset, source, options)
     }

packages/builder/src/builderStore/index.js

@@ -25,7 +25,7 @@ export const selectedComponent = derived(
     if (!$currentAsset || !$store.selectedComponentId) {
       return null
     }
-    return findComponent($currentAsset.props, $store.selectedComponentId)
+    return findComponent($currentAsset?.props, $store.selectedComponentId)
   }
 )
 

packages/builder/src/builderStore/store/frontend.js

@@ -400,11 +400,11 @@ export const getFrontendStore = () => {
             parentComponent = selected
           } else {
             // Otherwise we need to use the parent of this component
-            parentComponent = findComponentParent(asset.props, selected._id)
+            parentComponent = findComponentParent(asset?.props, selected._id)
           }
         } else {
           // Use screen or layout if no component is selected
-          parentComponent = asset.props
+          parentComponent = asset?.props
         }
 
         // Attach component

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte

@@ -21,7 +21,7 @@
 
   const moveUpComponent = () => {
     const asset = get(currentAsset)
-    const parent = findComponentParent(asset.props, component._id)
+    const parent = findComponentParent(asset?.props, component._id)
     if (!parent) {
       return
     }
@@ -41,7 +41,7 @@
 
   const moveDownComponent = () => {
     const asset = get(currentAsset)
-    const parent = findComponentParent(asset.props, component._id)
+    const parent = findComponentParent(asset?.props, component._id)
     if (!parent) {
       return
     }

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/S3Upload.svelte

@@ -5,7 +5,7 @@
 
   export let parameters
 
-  $: components = findAllMatchingComponents($currentAsset.props, component =>
+  $: components = findAllMatchingComponents($currentAsset?.props, component =>
     component._component.endsWith("s3upload")
   )
 </script>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte

@@ -10,7 +10,7 @@
   const dispatch = createEventDispatcher()
   const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
 
-  $: path = findComponentPath($currentAsset.props, $store.selectedComponentId)
+  $: path = findComponentPath($currentAsset?.props, $store.selectedComponentId)
   $: providers = path.filter(c => c._component?.endsWith("/dataprovider"))
 
   // Set initial value to closest data provider

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte

@@ -12,7 +12,7 @@
   export let type
 
   $: form = findClosestMatchingComponent(
-    $currentAsset.props,
+    $currentAsset?.props,
     componentInstance._id,
     component => component._component === "@budibase/standard-components/form"
   )

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ResetFieldsButton.svelte

@@ -11,7 +11,7 @@
 
   const resetFormFields = async () => {
     const form = findClosestMatchingComponent(
-      $currentAsset.props,
+      $currentAsset?.props,
       componentInstance._id,
       component => component._component.endsWith("/form")
     )

packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte

@@ -135,7 +135,7 @@
         if (asset?._id) {
           url += `/${asset._id}`
           if (componentId) {
-            const componentPath = findComponentPath(asset.props, componentId)
+            const componentPath = findComponentPath(asset?.props, componentId)
             const componentURL = componentPath
               .slice(1)
               .map(comp => comp._id)