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

default discord avatar
Taun
7 months ago
13

Hi. I'm receiving a type error, any ideas? Also, why is it referring to files that don't exist? "pages" . I have a Page.ts.



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,
  ],
});


Started a fresh Nextjs custom-server repo and running into the same error.



Here's the repo:

https://github.com/taunhealy/WhitePolaroids2
  • default discord avatar
    thisisnotchris
    7 months ago

    Hmm



    Isn't layout a default field?

  • default discord avatar
    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
  • default discord avatar
    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 👍

  • default discord avatar
    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.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.