Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

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

default discord avatar
taun21602 years ago
4

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
    notchr2 years ago

    Hmm



    Isn't layout a default field?

  • default discord avatar
    taun21602 years 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
  • discord user avatar
    jarrod_not_jared
    2 years ago
    @479030528084017165

    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
    taun21602 years 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 -

    #1099974116653678632

    Nevermind, it's working again.

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.