1: Collection "pages" > Field "layout" > "value" does not match any of the allowed types

Taun

7 months ago

13

yarn run v1.22.19
$ ts-node server.ts
[13:18:10] INFO (payload): Connected to Mongo server successfully!
[13:18:10] INFO (payload): Starting Payload...
[13:18:11] ERROR (payload): There were 1 errors validating your Payload config
[13:18:11] ERROR (payload): 1: Collection "pages" > Field "layout" > "value" does not match any of the allowed types
error Command failed with exit code 1.

import { CollectionConfig } from 'payload/types';
import { MediaType } from './Media';
import formatSlug from '../utilities/formatSlug';
import { Image } from '../blocks/Image/Image_Config';
import { Type as ImageType } from '../blocks/Image/Image_Component';
import { CallToAction } from '../blocks/CallToAction/CallToAction_Config';
import { Type as CallToActionType } from '../blocks/CallToAction/CallToAction_Component';
import { Content } from '../blocks/Content/Content_Config';
import { Type as ContentType } from '../blocks/Content/Content_Component';
import { PortfolioHero } from '../blocks/PortfolioHero/PortfolioHero_Config';
import { PortfolioHeroType } from '../blocks/PortfolioHero/PortfolioHero_Component';

export type Layout = CallToActionType | ContentType | ImageType | PortfolioHeroType

export type Type = {
  title: string
  slug: string
  image?: MediaType
  layout: Layout[]
  meta: {
    title?: string
    description?: string
    keywords?: string
  }
}

export const Page: CollectionConfig = {
  slug: 'pages',
  admin: {
    useAsTitle: 'title',
  },
  access: {
    read: (): boolean => true, // Everyone can read Pages
  },
  fields: [
    {
      name: 'title',
      label: 'Page Title',
      type: 'text',
      required: true,
    },
    {
      name: 'image',
      label: 'Featured Image',
      type: 'upload',
      relationTo: 'media',
    },
    {
      name: 'layout',
      label: 'Page Layout',
      type: 'blocks',
      minRows: 1,
      blocks: [
        CallToAction,
        Content,
        Image,
        PortfolioHero
      ],
    },
  

  {
      name: 'meta',
      label: 'Page Meta',
      type: 'group',
      fields: [
        {
          name: 'title',
          label: 'Title',
          type: 'text',
        },
        {
          name: 'description',
          label: 'Description',
          type: 'textarea',
        },
        {
          name: 'keywords',
          label: 'Keywords',
          type: 'text',
        },
      ],
    },
    {
      name: 'slug',
      label: 'Page Slug',
      type: 'text',
      admin: {
        position: 'sidebar',
      },
      hooks: {
        beforeValidate: [
          formatSlug('title'),
        ],
      },
    },
  ],
};

export default Page;

 import { buildConfig } from 'payload/config';
import dotenv from 'dotenv';
import Page from './collections/Page';
import Media from './collections/Media';

dotenv.config();

export default buildConfig({
  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
  collections: [
    Page,
    Media,
  ],
});

• 

  thisisnotchris

  7 months ago

  Hmm

  
  

  
  

  Isn't layout a default field?

• 

  Taun

  7 months ago

  Yea. It works on startup, when I add PortfolioHero as a block it bugs out, I think.

  
  
  

   import { CollectionConfig } from 'payload/types';
  import { MediaType } from './Media';
  import formatSlug from '../utilities/formatSlug';
  import { Image } from '../blocks/Image/Config';
  import { Type as ImageType } from '../blocks/Image/Component';
  import { CallToAction } from '../blocks/CallToAction/Config';
  import { Type as CallToActionType } from '../blocks/CallToAction/Component';
  import { Content } from '../blocks/Content/Config';
  import { Type as ContentType } from '../blocks/Content/Component';
  import { PortfolioHeroType } from '../blocks/PortfolioHero/PortfolioHero_Component';
  import { PortfolioHero } from '../blocks/PortfolioHero/PortfolioHero_Config';
  
  
  export type Layout = CallToActionType | ContentType | ImageType | PortfolioHeroType
  
  export type Type = {
    title: string
    slug: string
    image?: MediaType
    layout: Layout[]
    meta: {
      title?: string
      description?: string
      keywords?: string
    }
  }
  
  export const Page: CollectionConfig = {
    slug: 'pages',
    admin: {
      useAsTitle: 'title',
    },
    access: {
      read: (): boolean => true, // Everyone can read Pages
    },
    fields: [
      {
        name: 'title',
        label: 'Page Title',
        type: 'text',
        required: true,
      },
      {
        name: 'image',
        label: 'Featured Image',
        type: 'upload',
        relationTo: 'media',
      },
      {
        name: 'layout',
        label: 'Page Layout',
        type: 'blocks',
        minRows: 1,
        blocks: [
          CallToAction,
          Content,
          Image,
          PortfolioHero
        ],
      },
      {
       

  
  

  
  

  Here's the PortfolioHero type:

  
  
  

   import React from 'react'
  import { MediaType } from '../../collections/Media'
  
  export type PortfolioHeroType = {
      blockType: 'portfoliohero'
      blockName?: string
      thumbnail: MediaType
      title: string;
  }
    
  export const Component: React.FC<Type> = (props) => {
      const { thumbnail, title } = props;
    
      return (
        <div>
          <img src={thumbnail.url} alt={thumbnail.alt} />
          <h1>{title}</h1>
        </div>
      );
    }

  
  

  
  

  // Config

  
  
  

   import { Block } from 'payload/types';
  
    export const PortfolioHero: Block = {
      slug: 'portfoliohero',
      labels: {
          singular: 'Portfolio Hero',
          plural: 'Portfolio Heroes',
      },
      fields: [
          {
              name: 'title',
              label: 'Title',
              type: 'text',
              required: true,
          },
          {
              type: 'upload',
              name: 'media',
              relationTo: 'media',
              label: 'Thumbnail Media',
              hasMany: false,
              required: true,
          },
      ],
  };

  
  

  
  

  I've started a third repo and I'm still running into this problem when I try to add a Portfolio block.

  
  
  

  I must be doing something daft.

  
  
  https://github.com/taunhealy/WhitePolaroids3
• 

  Jarrod

  7 months ago

  @Taun if you could attempt to narrow the issue down that would be great. You can start by commenting out 1 block field at a time, then possibly removing field attributes like required. This would be helpful 👍

• 

  Taun

  7 months ago

  Ok cool, will do, thanks Jarrod. I've started a new repo and didn't run into that error yet. Today I can't access my admin dashboard, can you or someone on the team please take a look? I'm not receiving a password reset email. Here's the help thread - #Incorrect Login Credentials and not receiving a password reset email

  
  

  
  

  Nevermind, it's working again.