I'm receiving this error (see comment below) related to Fields. That's the clue. My guess is that is has something to do with link: Field, as Fields is the latest folder I added to the project. I'm working with Custom-website-series and Payload-website repos to copy/paste and modify code.

I have a collection named Pages.

Does this code look correct?

import { Field } from 'payload/types';
import { Type as PageType } from '../collections/Pages';

export type Type = {
  type: 'page' | 'custom'
  label: string
  page?: PageType
  url?: string
}

const link: Field = {
  name: 'link',
  type: 'group',
  fields: [
    {
      name: 'type',
      type: 'radio',
      options: [
        {
          label: 'Page',
          value: 'page',
        },
        {
          label: 'Custom URL',
          value: 'custom',
        },
      ],
      defaultValue: 'page',
      admin: {
        layout: 'horizontal',
      },
    },
    {
      type: 'row',
      fields: [
        {
          name: 'label',
          label: 'Label',
          type: 'text',
          required: true,
          admin: {
            width: '50%',
          },
        },
        {
          name: 'page',
          label: 'Page to link to',
          type: 'relationship',
          relationTo: 'pages',
          required: true,
          admin: {
            condition: (_, siblingData) => siblingData?.type === 'page',
            width: '50%',
          },
        },
        {
          name: 'url',
          label: 'Custom URL',
          type: 'text',
          required: true,
          admin: {
            condition: (_, siblingData) => siblingData?.type === 'custom',
            width: '50%',
          },
        },
      ],
    },
  ],
};

export default link;

[13:09:55] INFO (payload): Connected to MongoDB server successfully!
[13:09:55] INFO (payload): Starting Payload...
TypeError: Cannot read properties of undefined (reading 'fields')
    at F:\git\TaunDevs\payload\node_modules\payload\src\fields\config\sanitize.ts:52:77
    at Array.map (<anonymous>)

notchrlast year
Hmm, this seems like a collection config issue
taun2160last year
Is there way for me to find out more about the error? This is some Davinci Code shit.
notchrlast year
Well, there are a few possibilities

- Is the field configuration conflicting with an existing configuration and requires a small migration?

- Is there a syntax error in the collection config?

- properties of undefined (reading X) means
whatever.fields
whatever is undefined, in this case...

You have two fields (one nested) with a fields array

So that may be somewhere to look

- Are your types re-generated?

That's all I can think of off the top of my head
taun2160last year
Thanks Chris

If I had say 50 collections, would the dev go through each one-by-one?
notchrlast year
Probably not
taun2160last year
You'd think software of 2023 would be able to help out with this
notchrlast year
Well, you have to decide the quickest path to understanding the issue

in this case, we know it's something that has a .fields property

We know it happened recently

You can identify where it started happening, right?
taun2160last year
I don't know what .fields is refering to. I have a fields Type, and arrays of fields, an interface with a property called 'fields' (fields: Field[])
notchrlast year
where are you using the interface

taun2160last year

There is a property called fields here:

import type { Field, GroupField } from 'payload/types'

import deepMerge from '../utilities/deepMerge'

interface Args {
  name: string
  fields: Field[]
  overrides?: Partial<GroupField>
}

export const blockFields = ({ name, fields, overrides }: Args): Field =>
  deepMerge(
    {
      name,
      label: false,
      type: 'group',
      admin: {
        hideGutter: true,
        style: {
          margin: 0,
          padding: 0,
        },
      },
      fields,
    },
    overrides,
  )

//blockFields.ts

import type { Field, GroupField } from 'payload/types'

import deepMerge from '../utilities/deepMerge'

interface Args {
  name: string
  fields: Field[]
  overrides?: Partial<GroupField>
}



export const blockFields = ({ name, fields, overrides }: Args): Field =>
  deepMerge(
    {
      name,
      label: false,
      type: 'group',
      admin: {
        hideGutter: true,
        style: {
          margin: 0,
          padding: 0,
        },
      },
      fields,
    },
    overrides,
  )

notchrlast year
add a log after blockFields

to make sure it isn't undefined

Also, assuming you're using a modern IDE
taun2160last year
Like so?
notchrlast year
You can add a breakpoint in your code to see where the error i happening
taun2160last year
Sorry my prev screenshot doesnt show it

Interesting, what's the code for that and where do I place it?
notchrlast year
ok what else did you recently edit
taun2160last year
I added the entire fields folder of Payload-website
notchrlast year
Interesting

To aswer the debug question

You can click to the left of a line of code

and it adds a red dot

Then when you run your application with a debugger (see the icon on the left sidebar that has a play button)

If it errors, it will show you which line

And if you hover over variables in youre code while paused at a breakpoint, it shows their computed value

which is super convinient
taun2160last year
Awesome, thanks, I'll checkout a Youtube vid to understand more
notchrlast year
For sure, i 200% recommend learning breakpoints

it will make your life easier
taun2160last year
So that is the only way to learn more about what is going wrong? The console can't reveal more?

Like some terminal running behind the scenes or something

I feel like I'm getting a summary
notchrlast year
The console is telling you there is an error

at some point in payloads code, it goes through sanitization, which has a function that validates the structure of your data

It may not be able to list explicitly which data was problematic

But the debugger allows you to pause execution and investigate an issue more in-depth

Which is why it's better than just going by the stack trace in console

Sometimes (especially in bundled code), stack traces will not guide you to the problematic code

But to the function that encountered the code

taun2160last year

Epic. I just ran it and received this:

 Uncaught SyntaxError F:\git\TaunDevs\payload\src\fields\blockFields.ts:1
import type { Field, GroupField } from 'payload/types'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (internal/vm:73:18)
    at wrapSafe (internal/modules/cjs/loader:1176:20)
    at Module._compile (internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (internal/modules/cjs/loader:1308:10)
    at Module.load (internal/modules/cjs/loader:1117:32)
    at Module._load (internal/modules/cjs/loader:958:12)
    at executeUserEntryPoint (internal/modules/run_main:81:12)
    at <anonymous> (internal/main/run_main_module:23:47)

notchrlast year
Ahh

That's interesting

Are you using import elsewhere?

taun2160last year

Elsewhere, outside of the blockFields.ts ?

import type { Field, GroupField } from 'payload/types'

import deepMerge from '../utilities/deepMerge'

interface Args {
  name: string
  fields: Field[]
  overrides?: Partial<GroupField>
}

export const blockFields = ({ name, fields, overrides }: Args): Field =>
  deepMerge(
    {
      name,
      label: false,
      type: 'group',
      admin: {
        hideGutter: true,
        style: {
          margin: 0,
          padding: 0,
        },
      },
      fields,
    },
    overrides,
  )

  console.log(blockFields);

That's blockFields.ts

notchrlast year
Interesting

That import error generally is a conflict with es modules / common js

@360823574644129795
Do you know whats going on here?
taun2160last year
I reloaded the types yesterday using the cmd you mentioned. That wouldn't be it?
notchrlast year
Well, we can try that and see if it changes anything

Though, in the top right of discord the channel search revealed other threads with your issue

"Cannot use import statement outside a module"

I would search that in the meantime (in this discord only)

And see if you find anything related until one of the Payload team members can assist

taun2160last year

Someone mentioned:

The fix for this was simply to (1) rename payload.config.ts to payload.config.js and update internal references and (2) switch from ts-node to node in the yarn serve definition.

Not sure if that relates to this

notchrlast year
Well

I think it's a deeper issue

First off

I saw you were copying some fields

Is it possibly your initial payload setup is messed up?

With the payload base project, it is properly configured

So it's curios to me that folks run into ES/Commonjs issues
alessiogr
last year
Weird weird, smells like that could also be a misconfigured tsconfig?
notchrlast year
Right

also hi
@360823574644129795
❤️

mornin'
alessiogr
last year
gooood morning!!

Well afternoon for me!
notchrlast year
@479030528084017165
Can we check out your tsconfig file

lets compare it to the base tsconfig

taun2160last year

Sorry, was afk.

import { buildConfig } from 'payload/config';
import path from 'path';
import BlogCategories from './collections/BlogCategories';
import PortfolioCategories from './collections/PortfolioCategories';
import Posts from './collections/Posts';
import Tags from './collections/Tags';
import Media from './collections/Media';
import Items from './collections/Items';
import { Footer } from './globals/Footer';
import { MainMenu } from './globals/MainMenu';
import { Pages } from './collections/Pages';
import Study from './collections/Study';
import Category from './collections/Category';

export default buildConfig({
  serverURL: 'http://localhost:4000',
  collections: [
        BlogCategories,
        PortfolioCategories,
        Posts,
        Tags,
        Media,
        Items,
        Pages,
        Study,
        Category,
     ],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts')
  },
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
  },
  globals: [Footer, MainMenu],
});

The Console log error seems to have changed to include [Function: blockFields]

[nodemon] starting `ts-node src/server.ts`
[14:43:22] INFO (payload): Connected to MongoDB server successfully!
[14:43:22] INFO (payload): Starting Payload...
[Function: blockFields]
TypeError: Cannot read properties of undefined (reading 'fields')

notchrlast year
That's because you're logging it

@479030528084017165
We meant your tsconfig.json

taun2160last year

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "strict": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "jsx": "react",
    "paths": {
      "payload/generated-types": [
        "./src/payload-types.ts",
      ],
    }
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build",
  ],
  "ts-node": {
    "transpileOnly": true,
    "swc": true,
  }
}

Sorry

Is it normal to have squiglies here:

notchrlast year
It depends
taun2160last year
Does payload-types differ from the Website-CMS repo to the Custom-website-series? Should I regenerate again?
notchrlast year
Try to regenerate

and see if it fixes

if not, we will compare our tsconfig files
taun2160last year
After searching I can't find the cmd. What's the cmd to regen types?
notchrlast year
@479030528084017165
All commands available via npm for your project are in package.json

In any node project you make
taun2160last year
Nice, thanks for another great tip
notchrlast year
😄

taun2160last year

You're giving me a beginners course into coding here ❤️

The console is still returning error:

PS F:\git\TaunDevs\payload> yarn generate:types
yarn run v1.22.19
$ cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types
[Function: blockFields]
F:\git\TaunDevs\payload\node_modules\payload\dist\fields\config\sanitize.js:109
                    fields: block.fields.concat(baseBlockFields_1.baseBlockFields)
                                  ^

Even when I run types cmd. I turned off the red dot?

notchrlast year
You turned off the breakpoint, good

You have a custom block

Somewhere right

taun2160last year

So it successfully ran the regen of types?

PS F:\git\TaunDevs\payload> yarn generate:types
yarn run v1.22.19
$ cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types
[Function: blockFields]
F:\git\TaunDevs\payload\node_modules\payload\dist\fields\config\sanitize.js:109
                    fields: block.fields.concat(baseBlockFields_1.baseBlockFields)
                                  ^

TypeError: Cannot read properties of undefined (reading 'fields')
    at F:\git\TaunDevs\payload\node_modules\payload\dist\fields\config\sanitize.js:109:35
    at Array.map (<anonymous>)
    at F:\git\TaunDevs\payload\node_modules\payload\dist\fields\config\sanitize.js:107:41
    at Array.map (<anonymous>)
    at sanitizeFields (F:\git\TaunDevs\payload\node_modules\payload\dist\fields\config\sanitize.js:71:19)
    at sanitizeCollection (F:\git\TaunDevs\payload\node_modules\payload\dist\collections\config\sanitize.js:129:47)
    at F:\git\TaunDevs\payload\node_modules\payload\dist\config\sanitize.js:39:39
    at Array.map (<anonymous>)
    at sanitizeConfig (F:\git\TaunDevs\payload\node_modules\payload\dist\config\sanitize.js:38:63)
    at F:\git\TaunDevs\payload\node_modules\payload\dist\config\build.js:189:48

Node.js v18.15.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS F:\git\TaunDevs\payload>

notchrlast year
No it didnt

I'm saying, where do you have a custom block

In your project

taun2160last year

I tihnk I chaned Media to MediaBlock to prevent the other error of multiple Media types.

import type { Block } from 'payload/types'

import { blockFields } from '../../fields/blockFields'

export type Type = {
  blockType: 'media-block'
}

export const MediaBlock: Block = {
  slug: 'MediaBlock',
  fields: [
    blockFields({
      name: 'mediaFields',
      fields: [
        {
          name: 'position',
          type: 'select',
          defaultValue: 'default',
          options: [
            {
              label: 'Default',
              value: 'default',
            },
            {
              label: 'Wide',
              value: 'wide',
            },
          ],
        },
        {
          name: 'media',
          type: 'upload',
          relationTo: 'media',
          required: true,
        },
        {
          name: 'caption',
          type: 'richText',
          admin: {
            elements: ['link'],
          },
        },
      ],
    }),
  ],
}

notchrlast year
Aah blockFields

Why is that wrapped like that

@479030528084017165
?

taun2160last year

I think it's a copy paste of the website-cms-main? This is the source file I copied -

import type { Block } from 'payload/types'

import { blockFields } from '../../fields/blockFields'

export const MediaBlock: Block = {
  slug: 'mediaBlock',
  fields: [
    blockFields({
      name: 'mediaBlockFields',
      fields: [
        {
          name: 'position',
          type: 'select',
          defaultValue: 'default',
          options: [
            {
              label: 'Default',
              value: 'default',
            },
            {
              label: 'Wide',
              value: 'wide',
            },
          ],
        },
        {
          name: 'media',
          type: 'upload',
          relationTo: 'media',
          required: true,
        },
        {
          name: 'caption',
          type: 'richText',
          admin: {
            elements: ['link'],
          },
        },
      ],
    }),
  ],
}

notchrlast year

ok take out the wrapping blockFields() for now

but keep the object inside

export const MediaBlock: Block = {
  slug: 'mediaBlock',
  fields: [
    {
      name: 'mediaBlockFields',
      fields: [
        {
          name: 'position',
          type: 'select',
          defaultValue: 'default',
          options: [
            {
              label: 'Default',
              value: 'default',
            },
            {
              label: 'Wide',
              value: 'wide',
            },
          ],
        },
        {
          name: 'media',
          type: 'upload',
          relationTo: 'media',
          required: true,
        },
        {
          name: 'caption',
          type: 'richText',
          admin: {
            elements: ['link'],
          },
        },
      ],
    },
  ],
}

and get rid of the import for blockField

then try to run

taun2160last year

yarn run v1.22.19
$ cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon
[nodemon] 2.0.22
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts
[nodemon] starting `ts-node src/server.ts`
[15:05:46] INFO (payload): Connected to MongoDB server successfully!
[15:05:46] INFO (payload): Starting Payload...
MissingFieldType: Field "mediaBlockFields" is either missing a field type or it does not match an available field type
    at F:\git\TaunDevs\payload\node_modules\payload\src\fields\config\sanitize.ts:15:28
    at Array.map (<anonymous>)
    at sanitizeFields (F:\git\TaunDevs\payload\node_modules\payload\src\fields\config\sanitize.ts:12:17)
    at F:\git\TaunDevs\payload\node_modules\payload\src\fields\config\sanitize.ts:99:35
    at Array.map (<anonymous>)
    at F:\git\TaunDevs\payload\node_modules\payload\src\fields\config\sanitize.ts:96:35
    at Array.map (<anonymous>)
    at sanitizeFields (F:\git\TaunDevs\payload\node_modules\payload\src\fields\config\sanitize.ts:12:17)
    at sanitizeCollection (F:\git\TaunDevs\payload\node_modules\payload\src\collections\config\sanitize.ts:145:36)
    at F:\git\TaunDevs\payload\node_modules\payload\src\config\sanitize.ts:29:99
[nodemon] app crashed - waiting for file changes before starting...

Ma bad, sorry I replaced the entire thing

I'll edit now and rerun

I don't think I have a mediaBlockFields file

Why the squigglies?

notchrlast year
syntax error

make sure you've closed bracket pairs, etc

If you copied what i wrote, i may have made a mistake and didnt close something

but in any case, fix that and retry

taun2160last year

 Property 'type' is missing in type '{ name: string; fields: ({ name: string; type: "select"; defaultValue: string; options: { label: string; value: string; }[]; } | { name: string; type: "upload"; relationTo: string; required: true; } | { name: string; type: "richText"; admin: { ...; }; })[]; }' but required in type '{ type: "array"; minRows?: number; maxRows?: number; labels?: Labels; fields: Field[]; admin?: Admin & { initCollapsed?: boolean; components?: { RowLabel?: RowLabel; } & { ...; }; }; interfaceName?: string; }'.ts(2322)

When I hover it says that. I don't yet see a syntax error.

notchrlast year
So you're missing type on a field?

you need type: 'text' or w/e type the field is

i think it should be "group" maybe

above the fields propertty

try adding type: "group"
taun2160last year
I've copy pasted the Payload repo file again and going from there. Brb.

Or is that a bad idea?
notchrlast year
well

yeah id say a clean slate may be good

taun2160last year

import type { Block } from 'payload/types'

import { blockFields } from '../../fields/blockFields'

export const MediaBlock: Block = {
  slug: 'mediaBlock',
  fields: [
    blockFields({
      name: 'mediaBlockFields',
      fields: [
        {
          name: 'position',
          type: 'select',
          defaultValue: 'default',
          options: [
            {
              label: 'Default',
              value: 'default',
            },
            {
              label: 'Wide',
              value: 'wide',
            },
          ],
        },
        {
          name: 'media',
          type: 'upload',
          relationTo: 'media',
          required: true,
        },
        {
          name: 'caption',
          type: 'richText',
          admin: {
            elements: ['link'],
          },
        },
      ],
    }),
  ],
}

This is what I've now got and the error is back to:

TypeError: Cannot read properties of undefined (reading 'fields')

notchrlast year

one sec

replace that whole thing

with the following

import type { Block } from 'payload/types'


export const MediaBlock: Block = {
  slug: 'mediaBlock',
  fields: [
    {
      name: 'mediaBlockFields',
      type: 'group',
      fields: [
        {
          name: 'position',
          type: 'select',
          defaultValue: 'default',
          options: [
            {
              label: 'Default',
              value: 'default',
            },
            {
              label: 'Wide',
              value: 'wide',
            },
          ],
        },
        {
          name: 'media',
          type: 'upload',
          relationTo: 'media',
          required: true,
        },
        {
          name: 'caption',
          type: 'richText',
          admin: {
            elements: ['link'],
          },
        },
      ],
    },
  ],
}

and see if it works

taun2160last year

TypeError: Cannot read properties of undefined (reading 'fields')

notchrlast year
And if you remove the collection

from the payload config

?

taun2160last year

brb

[15:20:22] INFO (payload): Connected to MongoDB server successfully!
[15:20:22] INFO (payload): Starting Payload...
InvalidFieldRelationship: Field Thumbnail has invalid relationship 'media'.

notchrlast year
Ah

taun2160last year

import { CollectionConfig } from 'payload/types';

const Items: CollectionConfig = {
  slug: 'items',
  admin: {
    useAsTitle: 'name',
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'name',
      type: 'text',
    },
    {
      name: 'description',
      type: 'text',
    },
    {
      name: 'category',
      type: "relationship",
      relationTo: "portfolioCategories",
    },
    {
    name: 'thumbnail',
    type: 'upload',
    relationTo: 'media',
    filterOptions: {
    mimeType: { contains: 'image' },
    }
    },
  ],
  timestamps: false,
}

export default Items;

notchrlast year

get rid of the thumbnail field

    {
    name: 'thumbnail',
    type: 'upload',
    relationTo: 'media',
    filterOptions: {
    mimeType: { contains: 'image' },
    }
    },

taun2160last year
InvalidFieldRelationship: Field Hero Media has invalid relationship 'media'.
notchrlast year
wheres the field her media

hero

taun2160last year

{
      name: 'heroMedia',
      label: 'Hero Media',
      type: 'upload',
      relationTo: 'media',
      required: true,
      admin: {
        condition: (_, siblingData) => siblingData?.heroType === 'contentAboveMedia' || siblingData?.heroType === 'contentLeftOfMedia',
      },
    },

notchrlast year
ok remove or comment it out

taun2160last year

Thats Page.ts

InvalidFieldRelationship: Field Media has invalid relationship 'media'.

notchrlast year
ok so there is a Media field somewhere

in one of the collections

basically get rid of the media references and see if you cant get past this issue

taun2160last year

This is the Media collection. It's fine?

import path from 'path';
import type { CollectionConfig } from 'payload/types';

export type Type = {
  title: string
  slug: string
}

const Media: CollectionConfig = {
  slug: 'media',
  upload: {
    staticDir: path.resolve(__dirname, '../../media'),
    // Specify the size name that you'd like to use as admin thumbnail
    adminThumbnail: 'thumbnail',
    imageSizes: [
      {
        height: 400,
        width: 400,
        crop: 'center',
        name: 'thumbnail',
      },
      {
        width: 900,
        height: 450,
        crop: 'center',
        name: 'sixteenByNineMedium',
      },
    ],
  },
  fields: [],
};

export default Media;

I'll keep tinkering. Thanks a lot Chris.

Finally no more errors 😄 After pretty much reverting to a boilerplate setup.

I'l rather build up, than reverse engineer.

notchrlast year
Haha for sure, I'm glad you've got a good base now

Open

Continue the discussion in Discord

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.