From 0e5c073b464b76a1046ff3e9a8467ebbb41a376d Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Thu, 30 Jul 2026 20:27:07 -0400
Subject: [PATCH] fix(docs): unblock prerender by closing Image JSX without
 blank lines (#48465)

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

Docs production builds can fail during prerender with:

`TypeError: Cannot read properties of undefined (reading 'children')`

Seen on `/guides/ai/going-to-prod` (and the same pattern exists on
several other guides).

Root cause: blank lines inside MDX JSX such as `<Image ...>` make the
MDX parser treat the element as closed early, which corrupts the AST.
Separately, `apps/docs/components/Image.tsx` forwarded accidental
`children` (and could overwrite `src`) onto `next/image`.

## What is the new behavior?

- Remove blank lines before the closing `/>` on the affected guide MDX
files so the JSX stays one element.
- Make the docs `Image` wrapper drop `children` and keep `src` from
props only, so a bad MDX tree is less likely to crash the build.

## Additional context

Split out of #48428 so that PR stays focused on Admonition/Alert
typography.

### To test

1. Check out this branch and run the docs app locally (`apps/docs`), or
wait for the Vercel docs preview on this PR.
2. Confirm these pages render without a prerender / `children` crash:
-
[/docs/guides/ai/going-to-prod](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/ai/going-to-prod)
-
[/docs/guides/ai/engineering-for-scale](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/ai/engineering-for-scale)
-
[/docs/guides/ai/choosing-compute-addon](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/ai/choosing-compute-addon)
-
[/docs/guides/ai/vector-indexes/hnsw-indexes](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/ai/vector-indexes/hnsw-indexes)
-
[/docs/guides/database/orioledb](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/database/orioledb)
-
[/docs/guides/database/connecting-to-postgres](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/database/connecting-to-postgres)
-
[/docs/guides/telemetry/reports](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/telemetry/reports)
3. Spot-check that the guide images still show at the expected size (no
broken/missing images from the `Image` wrapper change).
4. Confirm Docs CI / Vercel docs build passes on this PR (this was the
failure mode on master-ish builds).

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added zoomable behavior to the Disk Size chart, with optimized light
and dark theme images.

* **Bug Fixes**
* Improved image rendering in documentation pages by handling captions,
styling, and MDX content more reliably.
* Corrected image markup formatting across multiple guides to ensure
content parses and displays correctly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/docs/components/Image.tsx                | 23 ++++++++++++++-----
 .../guides/ai/choosing-compute-addon.mdx      |  5 ----
 .../guides/ai/engineering-for-scale.mdx       |  3 ---
 apps/docs/content/guides/ai/going-to-prod.mdx |  4 ----
 .../guides/ai/vector-indexes/hnsw-indexes.mdx |  1 -
 .../database/connecting-to-postgres.mdx       |  1 -
 .../docs/content/guides/database/orioledb.mdx |  1 -
 .../monitoring-and-debugging/reports.mdx      |  1 -
 8 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/apps/docs/components/Image.tsx b/apps/docs/components/Image.tsx
index bd89a77272b..9ac6a934cb9 100644
--- a/apps/docs/components/Image.tsx
+++ b/apps/docs/components/Image.tsx
@@ -41,22 +41,33 @@ export interface ImageProps extends Omit<NextImageProps, 'src'> {
  * making sure it doesn't affect other projects consuming the component.
  *
  */
-const Image = ({ src, alt = '', ...props }: ImageProps) => {
+const Image = ({
+  src,
+  alt = '',
+  className,
+  style,
+  containerClassName,
+  caption,
+  // MDX can pass whitespace-only children (e.g. a blank line before `/>`);
+  // never forward those to next/image.
+  children: _children,
+  ...rest
+}: ImageProps) => {
   const { resolvedTheme } = useTheme()
   const source =
     typeof src === 'string' ? src : resolvedTheme?.includes('dark') ? src.dark : src.light
 
   return (
-    <figure className={props.containerClassName}>
+    <figure className={containerClassName}>
       <NextImage
         key={resolvedTheme}
         alt={alt}
         src={source}
-        className={props.className}
-        style={props.style}
-        {...props}
+        className={className}
+        style={style}
+        {...rest}
       />
-      {props.caption && <figcaption className="text-center">{props.caption}</figcaption>}
+      {caption && <figcaption className="text-center">{caption}</figcaption>}
     </figure>
   )
 }
diff --git a/apps/docs/content/guides/ai/choosing-compute-addon.mdx b/apps/docs/content/guides/ai/choosing-compute-addon.mdx
index 9243663b8f2..484f58c279f 100644
--- a/apps/docs/content/guides/ai/choosing-compute-addon.mdx
+++ b/apps/docs/content/guides/ai/choosing-compute-addon.mdx
@@ -130,7 +130,6 @@ The chart below compares HNSW queries-per-second across compute sizes for differ
   }}
   width={1427}
   height={862}
-
 />
 
 ## IVFFlat
@@ -268,7 +267,6 @@ The chart below plots requests-per-second against compute size.
   }}
   width={1427}
   height={862}
-
 />
 
 <Admonition type="note">
@@ -308,7 +306,6 @@ The chart below shows how the HNSW build parameters `m` and `ef_construction` af
   }}
   width={1052}
   height={796}
-
 />
 
 </TabPanel>
@@ -324,7 +321,6 @@ The chart below shows how the number of IVFFlat lists affects performance for on
   }}
   width={1032}
   height={796}
-
 />
 
 </TabPanel>
@@ -345,7 +341,6 @@ We follow techniques outlined in the [ANN Benchmarks](https://github.com/erikber
   className="max-h-[650px]"
   width={1196}
   height={1194}
-
 />
 
 _The diagram above shows the vecs benchmark setup: a Python test runner uploads data, builds the index, and runs queries against pgvector._
diff --git a/apps/docs/content/guides/ai/engineering-for-scale.mdx b/apps/docs/content/guides/ai/engineering-for-scale.mdx
index 225e4c6c835..bf6beeae17f 100644
--- a/apps/docs/content/guides/ai/engineering-for-scale.mdx
+++ b/apps/docs/content/guides/ai/engineering-for-scale.mdx
@@ -24,7 +24,6 @@ The diagram below shows a single database holding the three vector collections o
   }}
   width={1600}
   height={1145}
-
 />
 
 For example, with 3 collections, called `docs`, `posts`, and `images`, we could expose the "docs" inside the public schema like this:
@@ -63,7 +62,6 @@ The diagram below shows a primary database alongside separate secondary "pod" da
   }}
   width={1600}
   height={1641}
-
 />
 
 You can use as many secondary databases as you need to manage your collections. With this architecture, you have 2 options for accessing collections within your application:
@@ -148,5 +146,4 @@ This diagram below provides an example architecture that allows you to access th
   }}
   width={1600}
   height={1754}
-
 />
diff --git a/apps/docs/content/guides/ai/going-to-prod.mdx b/apps/docs/content/guides/ai/going-to-prod.mdx
index f460254660f..38ce097c4af 100644
--- a/apps/docs/content/guides/ai/going-to-prod.mdx
+++ b/apps/docs/content/guides/ai/going-to-prod.mdx
@@ -36,7 +36,6 @@ On the other hand, if you need to scale your application, you will need to [crea
   }}
   width={1052}
   height={796}
-
 />
 
 ## HNSW, understanding `ef_construction`, `ef_search`, and `m`
@@ -59,7 +58,6 @@ Search parameters:
   }}
   width={1052}
   height={796}
-
 />
 
 ## IVFFlat, understanding `probes` and `lists`
@@ -84,7 +82,6 @@ The chart below shows how the IVFFlat lists count affects accuracy and queries-p
   }}
   width={1467}
   height={808}
-
 />
 
 ## Performance tips when using indexes
@@ -129,5 +126,4 @@ The chart below plots requests-per-second against compute size.
   }}
   width={1427}
   height={862}
-
 />
diff --git a/apps/docs/content/guides/ai/vector-indexes/hnsw-indexes.mdx b/apps/docs/content/guides/ai/vector-indexes/hnsw-indexes.mdx
index 8ddcb7c0ab0..38d06d2bb64 100644
--- a/apps/docs/content/guides/ai/vector-indexes/hnsw-indexes.mdx
+++ b/apps/docs/content/guides/ai/vector-indexes/hnsw-indexes.mdx
@@ -101,7 +101,6 @@ The diagram below shows a navigable small world graph. Each node connects to nea
   className="max-h-[600px] mx-auto"
   width={1016}
   height={759}
-
 />
 
 The “navigable” part of NSW specifically refers to the ability to logarithmically scale the greedy search algorithm on the graph, an algorithm that attempts to make only the locally optimal choice at each hop. Without this property, the graph may still be considered a small world with short paths between far-away nodes, but the greedy algorithm tends to miss them. Greedy search is ideal for NSW because it is quick to navigate and has low computational costs.
diff --git a/apps/docs/content/guides/database/connecting-to-postgres.mdx b/apps/docs/content/guides/database/connecting-to-postgres.mdx
index 4045b69e5fc..2ae0a4d3164 100644
--- a/apps/docs/content/guides/database/connecting-to-postgres.mdx
+++ b/apps/docs/content/guides/database/connecting-to-postgres.mdx
@@ -168,7 +168,6 @@ Server-side poolers, such as Supabase's [Supavisor](https://github.com/supabase/
   width={1851}
   height={907}
   caption="Connecting to the database directly vs using a Connection Pooler"
-
 />
 
 They maintain hot connections with the database and intelligently share them with clients only when needed, maximizing the amount of queries a single connection can service. They're best used to manage queries from auto-scaling systems, such as edge and serverless functions.
diff --git a/apps/docs/content/guides/database/orioledb.mdx b/apps/docs/content/guides/database/orioledb.mdx
index fcbdfa5fc06..e7069232c78 100644
--- a/apps/docs/content/guides/database/orioledb.mdx
+++ b/apps/docs/content/guides/database/orioledb.mdx
@@ -14,7 +14,6 @@ OrioleDB addresses Postgres's scalability limitations by removing bottlenecks in
   className="max-w-[550px] mx-auto! border rounded-md"
   width={1000}
   height={609}
-
 />
 
 <Admonition type="note">
diff --git a/apps/docs/content/guides/monitoring-and-debugging/reports.mdx b/apps/docs/content/guides/monitoring-and-debugging/reports.mdx
index da2e2e0fbaf..3daa92daeaf 100644
--- a/apps/docs/content/guides/monitoring-and-debugging/reports.mdx
+++ b/apps/docs/content/guides/monitoring-and-debugging/reports.mdx
@@ -283,7 +283,6 @@ src={{
     dark: '/docs/img/database/reports/disk-size-chart-dark.png',
     light: '/docs/img/database/reports/disk-size-chart-light.png',
   }}
-
 />
 
 | Component    | Description                                               |