Sanitization error - sanitize.ts

taun2160

3 months ago

Anyone know what this issue is and how I can solve? I'm trying to get a starter boilerplate going by removing the extra Payload website files. The last thing I remember doing is removing 'hero' fields. I don't understand how the sanitize.ts file got corrupted?

[10:59:05] INFO (payload): Connected to MongoDB server successfully!
    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
    at Array.map (<anonymous>)
    at sanitizeConfig (F:\git\TaunDevs\payload\node_modules\payload\src\config\sanitize.ts:29:61)
    at buildConfig (F:\git\TaunDevs\payload\node_modules\payload\src\config\build.ts:26:18)
[nodemon] app crashed - waiting for file changes before starting...

dribbens
Payload Team
3 months ago
Interesting! It must be an uncaught issue with your config. I would start by excluding collections and or globals from your config to figure out where the issue is.

If you can find where the offending issue is, please share it here or open a new issue on Github so we can handle whatever is causing the issue in the validation step to give better errors

You could also make the issue with the full reproduction repo for one of us to take a look if you can't figure out what is the cause.

taun2160

3 months ago

Thanks Dan. I removed the collections and it's now returning this error related to Users:

 [12:00:55] INFO (payload): Starting Payload...
InvalidConfiguration: users is not a valid admin user collection
    at sanitizeConfig (F:\git\TaunDevs\payload\node_modules\payload\src\config\sanitize.ts:26:11)
    at buildConfig (F:\git\TaunDevs\payload\node_modules\payload\src\config\build.ts:26:18)
    at Object.<anonymous> (F:\git\TaunDevs\payload\src\payload.config.ts:15:27)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module.m._compile (F:\git\TaunDevs\payload\node_modules\ts-node\src\index.ts:1056:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Object.require.extensions.<computed> [as .ts] (F:\git\TaunDevs\payload\node_modules\ts-node\src\index.ts:1059:12)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Function.Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)

This is my current config file without collections:

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 Users from './collections/Users';
import Media from './collections/Media';
import Items from './collections/Items';
import { TopBar } from './globals/TopBar';
import { Footer } from './globals/Footer';
import { MainMenu } from './globals/MainMenu';
import { Pages } from './collections/Pages';

export default buildConfig({
  serverURL: 'http://localhost:4000',
  admin: {
    user: Users.slug,
  },
  collections: [
   
  ],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts')
  },
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
  },
  globals: [Footer, MainMenu, TopBar],
});

Excluded:

 BlogCategories,
    PortfolioCategories,
    Posts,
    Tags,
    Users,
    Media,
    Items,
    Pages,

I tried to paste the collections back and it returns a differnet error:

[12:05:13] INFO (payload): Starting Payload...
InvalidFieldRelationship: Field Category has invalid relationship 'blog_categories'.
    at F:\git\TaunDevs\payload\node_modules\payload\src\fields\config\sanitize.ts:35:17
    at Array.forEach (<anonymous>)
    at F:\git\TaunDevs\payload\node_modules\payload\src\fields\config\sanitize.ts:33:21

This is the code with the collections... did I paste it incorrectly?

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 Users from './collections/Users';
import Media from './collections/Media';
import Items from './collections/Items';
import { TopBar } from './globals/TopBar';
import { Footer } from './globals/Footer';
import { MainMenu } from './globals/MainMenu';
import { Pages } from './collections/Pages';

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

dribbens
Payload Team
3 months ago
This is erroring because admin.user: Users.slug isn't a collection that you have defined. Since you are relying on the default user collection, this line could be removed and then I believe it would start alright.

Since you obviously want to have collections, let's skip this for now

Your
relationTo
properties on your relationship fields need to match exactly with the slugs used in the collections.

I would guess that
blog_categories
should be
blog-categories

If you can add one collection back in at a time we can figure out which collection config contains something bad.

Having relationships complicates this, so you might have to go in an order that doesn't give you bad
relationTo
s

make sense?

taun2160

3 months ago

Makes sense. Thanks Dan. It's now returning error:

[12:17:20] INFO (payload): Starting Payload...
InvalidFieldRelationship: Field Form has invalid relationship 'forms'.

I don't recall adding a form, but maybe I deleted something that is tripping it up.

Though Forms appears to be a payload-types file?

Oh I see it's located here:

import type { Block } from 'payload/types'

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

export const Form: Block = {
  slug: 'form',
  labels: {
    singular: 'Form Block',
    plural: 'Form Blocks',
  },
  graphQL: {
    singularName: 'FormBlock',
  },
  fields: [
    blockFields({
      name: 'formFields',
      fields: [
        {
          name: 'container',
          type: 'checkbox',
          admin: {
            description: 'Check this box to render this block with a background container.',
          },
        },
        richText(),
        {
          name: 'form',
          type: 'relationship',
          relationTo: 'forms',
          required: true,
        },
      ],
    }),
  ],
}

I assume I deleted the forms collection. I guess I should delete

 {
          name: 'form',
          type: 'relationship',
          relationTo: 'forms',
          required: true,
        },

I think I'm getting there, I'll keep working through it and let you know.

Cool, back in the game. Thanks Dan.

dribbens
Payload Team
3 months ago
NP Taun, glad we got it sorted!

taun2160

3 months ago

I'm able to access everything except for Items.

It renders and then jumps to a blank page and returns this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'admin')
    at formatUseAsTitle (useTitle.js:13:67)
    at index.js:74:1
    at Array.map (<anonymous>)
    at RelationshipCell (index.js:71:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

collections / Items.ts

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;

Vscode terminal isn't returning any errors

2023-06-22_14-56-38.mkv

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.