Admin panel crashes with fresh database and project scaffolded as blog

[richardvanbergen]

Bug Report

The following error causes the admin panel to crash when creating the first post in the blog example.

Uncaught TypeError: firstAvailableCollection is undefined
index.js:46
React 3
UploadButton index.js:44
React 12
unstable_runWithPriority scheduler.development.js:468
React 2
workLoop scheduler.development.js:417
flushWork scheduler.development.js:390
performWorkUntilDeadline scheduler.development.js:157

Expected Behavior

Should be able to create my first blog post.

Possible Solution

Seems to be an issue with the new RichText upload button. Error occurs on this line: https://github.com/payloadcms/payload/blob/master/src/admin/components/forms/field-types/RichText/elements/upload/Button/index.tsx#L55

My suggestion is to disable or hide the button if no collections are found with { enableRichTextRelationship: true } and update the Blog template to include a collection with { enableRichTextRelationship: true } by default.

For the time being I added the following collection to my project:

import { CollectionConfig } from 'payload/types';

const ImageCollection: CollectionConfig = {
  slug: 'image',
  labels: {
    singular: 'Image',
    plural: 'Images',
  },
  access: {
    read: () => true,
  },
  admin: {
    useAsTitle: 'alt',
    enableRichTextRelationship: true,
  },
  fields: [
    {
      name: 'alt',
      label: 'Alternative Text',
      type: 'text',
      required: true,
    },
  ],
  upload: {
    adminThumbnail: 'thumbnail',
    imageSizes: [
      {
        name: 'desktop',
        width: 2000,
        height: 2000,
      },
      {
        name: 'mobile',
        width: 1000,
        height: 1000,
      },
      {
        name: 'thumbnail',
        width: 400,
        height: 400,
      },
    ],
  },
}

export default ImageCollection

Steps to Reproduce

1. Create a new project and select the blog template: npx create-payload-app
2. Connect to a database and start the server.
3. Posts > Create New
4. Crash.

Detailed Description

Payload version: 0.10.11

[jmikrut]

Good find! Fixed. Thanks Richard.

Releasing new version now.

[aaronmarkle]

This looks to still be an issue. As of today, I did npx create-payload-app, used the blog starter template. When creating/editing a post, the rich text editor has the upload button, and when clicked it just goes to a blank screen.

Adding the above Image collection code resolved issue. Perhaps the default Blog template should be updated to include the Image collection?

[jacobsfletch]

@aaronmarkle I was able to recreate this on my end. We'll get this squared away. Thank you for the report!

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.