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/WhitePolaroids2Hmm
Isn't layout a default field?
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.
@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 👍
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.
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.