payloadcms / payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://payloadcms.com
MIT License
25.75k stars 1.64k forks source link

`date-fns` errors triggered by invalid `displayFormat` lags the entire admin panel #8977

Open tyteen4a03 opened 2 weeks ago

tyteen4a03 commented 2 weeks ago

Describe the Bug

On a packaged build of Payload, configuring a field's admin.date.displayFormat incorrectly will cause the Next dev server to spit out a very large traceback which is just the minified source code of the bundle, which dramatically slows down the panel to where the list view of the collection with the incorrect hangs for more complex collections.

This also seems to affect Local API (might be a separate bug?)

Link to the code that reproduces this issue

https://github.com/tyteen4a03/payload-date-fns-bug

Reproduction Steps

(Step 1 to 2 are reproduced in the repo)

  1. Use pnpm dlx create-payload-app@beta to set up a new app. I used MongoDB but I don't think the database adapter matters. (NOTE: This cannot be reproduced using tests/ as the dependency isn't minified there)
  2. Add the following collection configuration:
import type { CollectionConfig } from 'payload'

export const Test: CollectionConfig = {
  slug: 'test',
  admin: {
    useAsTitle: 'startTime',
  },
  fields: [
    {
      name: "startTime",
      type: "date",
      required: true,
      index: true,
      admin: {
        date: {
          displayFormat: "dd/MM/yyyy HH:mm", // NOTE: This line is important
          pickerAppearance: "dayAndTime",
          timeIntervals: 1,
        },
      },
    },
  ],
}
  1. Navigate to the admin panel, in the Test collection, add a new entity and set the startTime field to any date.
  2. Change the Tests CollectionConfig's admin.date.displayFormat to DD/MM/YYYY HH:mm (notice the uppercase DD and YYYY)
  3. Navigate to the Test collection's List View page. This will trigger the error with an incredibly large traceback in the dev server. (if it does not trigger, refresh the list view page a few times.)

Which area(s) are affected? (Select all that apply)

area: core

Environment Info

Node.js v22.11.0

Binaries: Node: 22.11.0 npm: 10.9.0 Yarn: N/A pnpm: 9.13.0 Relevant Packages: payload: 3.0.0-beta.130 next: 15.0.0 @payloadcms/db-mongodb: 3.0.0-beta.130 @payloadcms/email-nodemailer: 3.0.0-beta.130 @payloadcms/graphql: 3.0.0-beta.130 @payloadcms/next/utilities: 3.0.0-beta.130 @payloadcms/payload-cloud: 3.0.0-beta.130 @payloadcms/richtext-lexical: 3.0.0-beta.130 @payloadcms/translations: 3.0.0-beta.130 @payloadcms/ui/shared: 3.0.0-beta.130 react: 19.0.0-rc-65a56d0e-20241020 react-dom: 19.0.0-rc-65a56d0e-20241020 Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:03:15 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6000 Available memory (MB): 32768 Available CPU cores: 10

tyteen4a03 commented 3 days ago

@denolfe I've updated the reproduction; tested on beta.130.