Merge pull request #25 from BKWLD/catch-sanity-url-builder-errors

Workaround Sanity url builder error when asset is empty

lerna.json

@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "0.3.5"
+  "version": "0.3.6-alpha.2"
 }

packages/sanity-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-visual/sanity-next",
-  "version": "0.3.5",
+  "version": "0.3.6-alpha.2",
   "description": "Image and video renderer for Sanity + Next.js projects",
   "author": "Bukwild <[email protected]>",
   "license": "MIT",

packages/sanity-next/src/lib/sourceMapping.ts

@@ -17,7 +17,7 @@ export function aspectRatioFromSource(
 ): number | undefined {
   if (!source) return undefined
   if (typeof source != 'object' || !('asset' in source)) return undefined
-  return source.asset.metadata?.dimensions?.aspectRatio
+  return source.asset?.metadata?.dimensions?.aspectRatio
 }
 
 // Make object-position values from the hotspot data

packages/sanity-next/src/lib/urlBuilding.ts

@@ -24,7 +24,7 @@ export function makeImageUrl(
   source?: SanityImageSource,
   options?: imageUrlBuildingOptions
 ): string | undefined {
-  if (!source) return undefined
+  if (!source || !sourceHasAsset(source)) return undefined
   return makeImageBuilder(source, options).url()
 }
 
@@ -53,14 +53,23 @@ export function makeImageBuilder(source: SanityImageSource, {
 export function makeImageLoader(
   source?: SanityImageSource
 ): ImageLoader | undefined {
-  if (!source) return undefined
+  if (!source || !sourceHasAsset(source)) return undefined
   return ({ width, quality }: ImageLoaderProps): string => {
     let builder = makeImageBuilder(source, { width })
     if (quality) builder = builder.quality(quality)
     return builder.url()
   }
 }
 
+// Check if the source has a populated asset field.  This was necessary because
+// UlrBuilder fatally errors when the image source has an asset property
+// with a null value.  And this was the case when uploading images with the
+// preview tab open.
+export function sourceHasAsset(source: SanityImageSource): boolean {
+  if (!source) return false
+  return typeof source == 'object' && 'asset' in source && source.asset
+}
+
 // Return the URL of an asset
 export function makeFileUrl(
   source?: SanityFileSource