fix(templates): website template building error with postgres number IDs (#7281)

Author: paulpopus

templates/website/package.json

@@ -17,16 +17,16 @@
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "dependencies": {
-    "@payloadcms/db-mongodb": "3.0.0-beta.63",
-    "@payloadcms/live-preview-react": "3.0.0-beta.63",
-    "@payloadcms/next": "3.0.0-beta.63",
-    "@payloadcms/plugin-cloud": "3.0.0-beta.63",
-    "@payloadcms/plugin-form-builder": "3.0.0-beta.63",
-    "@payloadcms/plugin-nested-docs": "3.0.0-beta.63",
-    "@payloadcms/plugin-redirects": "3.0.0-beta.63",
-    "@payloadcms/plugin-seo": "3.0.0-beta.63",
-    "@payloadcms/richtext-lexical": "3.0.0-beta.63",
-    "@payloadcms/ui": "3.0.0-beta.63",
+    "@payloadcms/db-mongodb": "3.0.0-beta.67",
+    "@payloadcms/live-preview-react": "3.0.0-beta.67",
+    "@payloadcms/next": "3.0.0-beta.67",
+    "@payloadcms/plugin-cloud": "3.0.0-beta.67",
+    "@payloadcms/plugin-form-builder": "3.0.0-beta.67",
+    "@payloadcms/plugin-nested-docs": "3.0.0-beta.67",
+    "@payloadcms/plugin-redirects": "3.0.0-beta.67",
+    "@payloadcms/plugin-seo": "3.0.0-beta.67",
+    "@payloadcms/richtext-lexical": "3.0.0-beta.67",
+    "@payloadcms/ui": "3.0.0-beta.67",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
@@ -40,7 +40,7 @@
     "lexical": "0.16.1",
     "lucide-react": "^0.378.0",
     "next": "15.0.0-canary.58",
-    "payload": "3.0.0-beta.63",
+    "payload": "3.0.0-beta.67",
     "payload-admin-bar": "^1.0.6",
     "prism-react-renderer": "^2.3.1",
     "react": "19.0.0-rc-6230622a1a-20240610",

templates/website/pnpm-lock.yaml

@@ -52,7 +52,7 @@ export default async function Post({ params: { slug = '' } }) {
 
         <RelatedPosts
           className="mt-12"
-          docs={post.relatedPosts.filter((post) => typeof post !== 'string')}
+          docs={post.relatedPosts.filter((post) => typeof post === 'object')}
         />
       </div>
     </article>

templates/website/src/app/(frontend)/posts/[slug]/page.tsx

@@ -22,8 +22,8 @@ export const ArchiveBlock: React.FC<
     const payload = await getPayloadHMR({ config: configPromise })
 
     const flattenedCategories = categories.map((category) => {
-      if (typeof category === 'string') return category
-      else return category.id
+      if (typeof category === 'object') return category.id
+      else return category
     })
 
     const fetchedPosts = await payload.find({
@@ -44,7 +44,7 @@ export const ArchiveBlock: React.FC<
     posts = fetchedPosts.docs
   } else {
     posts = selectedDocs.map((post) => {
-      if (typeof post.value !== 'string') return post.value
+      if (typeof post.value === 'object') return post.value
     })
   }
 

templates/website/src/app/blocks/ArchiveBlock/index.tsx

@@ -13,7 +13,7 @@ type CMSLinkType = {
   newTab?: boolean
   reference?: {
     relationTo: 'pages' | 'posts'
-    value: Page | Post | string
+    value: Page | Post | string | number
   }
   size?: ButtonProps['size']
   type?: 'custom' | 'reference'

templates/website/src/app/components/Link/index.tsx

@@ -32,7 +32,7 @@ export const ImageMedia: React.FC<MediaProps> = (props) => {
   let alt = altFromProps
   let src: StaticImageData | string = srcFromProps || ''
 
-  if (!src && resource && typeof resource !== 'string') {
+  if (!src && resource && typeof resource === 'object') {
     const {
       alt: altFromResource,
       filename: fullFilename,

templates/website/src/app/components/Media/ImageMedia/index.tsx

@@ -21,7 +21,7 @@ export const VideoMedia: React.FC<MediaProps> = (props) => {
     }
   }, [])
 
-  if (resource && typeof resource !== 'string') {
+  if (resource && typeof resource === 'object') {
     const { filename } = resource
 
     return (

templates/website/src/app/components/Media/VideoMedia/index.tsx

@@ -8,7 +8,7 @@ import { VideoMedia } from './VideoMedia'
 export const Media: React.FC<Props> = (props) => {
   const { className, htmlElement = 'div', resource } = props
 
-  const isVideo = typeof resource !== 'string' && resource?.mimeType?.includes('video')
+  const isVideo = typeof resource === 'object' && resource?.mimeType?.includes('video')
   const Tag = (htmlElement as any) || Fragment
 
   return (

templates/website/src/app/components/Media/index.tsx

@@ -13,7 +13,7 @@ export interface Props {
   onLoad?: () => void
   priority?: boolean // for NextImage only
   ref?: Ref<HTMLImageElement | HTMLVideoElement | null>
-  resource?: MediaType | string // for Payload media
+  resource?: MediaType | string | number // for Payload media
   size?: string // for NextImage only
   src?: StaticImageData // for static media
   videoClassName?: string

templates/website/src/app/components/Media/types.ts

@@ -35,7 +35,9 @@ export const PayloadRedirects: React.FC<Props> = async ({ disableNotFound, url }
       }`
     } else {
       redirectUrl = `${redirectItem.to?.reference?.relationTo !== 'pages' ? `/${redirectItem.to?.reference?.relationTo}` : ''}/${
-        redirectItem.to?.reference?.value?.slug
+        typeof redirectItem.to?.reference?.value === 'object'
+          ? redirectItem.to?.reference?.value?.slug
+          : ''
       }`
     }