I'm getting these error when running pnpm run generate:types. So first I got error about some module not being installed and then about dotenv, so just tryed installing these to fix the error. Then after that I came to the end bug, where it looks liket the bin.js isn't ESM yet.

I switched my user collection from this:

export const User: CollectionConfig = {
  slug: "user",
  auth: true,

to this:

export const User: CollectionConfig = {
  slug: "user",
  auth: {
    strategies: [
      {
        name: "discord",
        authenticate: discordAuthenticationStrategy,
      },
    ],
  },

Now, when I logout, it says I've successfully logged out. If I press Log back in, it just instantly brings me to the /admin page, without any authentication whatsoever. It also just sets me as the most recently created user, or a random user.

currently discordAuthenticationStrategy just returns null.

aside from this; a full OAuth example would be really nice.

Edit;
I swear I restarted my dev server to verify that it was broken and it was still broken. After restarting again, it does seem to still use the local strategy... However, I have a console.log running in the discordAuthenticationStrategy and it fires a lot. This is the phase that we'd be requesting access + refresh tokens and api data directly from the OAuth provider, correct? So, this should definitely only be firing on logins and potentially token refreshes?

Not to mention... I was also using the local strategy to login. discordAuthenticationStrategy should not even fire once.

Using Postgres, pnpm, latest payload-3.0-alpha-demo, all alpha versions are at 41.

Adding the following to a collection's fields works fine on the individual document page:

    {
      name: "jsonTest",
      type: "json",
    },

However, when going back to my collection's list view (paginated table), I get a white screen and the following client devtools errors:

main-app.js?v=1710003264937:992 Warning: Cannot update a component (`HotReload`) while rendering a different component (`JSONCell`). To locate the bad setState() call inside `JSONCell`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at JSONCell (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_n_byv5ctekdhxgwgmcsqe7kjtcqa/node_modules/@payloadcms/next/dist/views/List/Default/Cell/fields/JSON/index.js:10:11)
    at span
    at DefaultCell (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_n_byv5ctekdhxgwgmcsqe7kjtcqa/node_modules/@payloadcms/next/dist/views/List/Default/Cell/index.js:22:13)
    at RenderCustomComponent (Server)
    at TableCellProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_vhdarcvh7s7zt25x34a6r7pun4/node_modules/@payloadcms/ui/dist/elements/Table/TableCellProvider/index.js:12:13)
...(many more lines)

index.js:11 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at JSONCell (index.js:11:33)
    at renderWithHooks (react-dom.development.js:11121:18)
    at mountIndeterminateComponent (react-dom.development.js:16869:13)
    at beginWork$1 (react-dom.development.js:18458:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:20565:14)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:20614:16)
    at invokeGuardedCallback (react-dom.development.js:20689:29)
    at beginWork (react-dom.development.js:26949:7)
    at performUnitOfWork (react-dom.development.js:25748:12)
    at workLoopConcurrent (react-dom.development.js:25734:5)
    at renderRootConcurrent (react-dom.development.js:25690:9)
    at performConcurrentWorkOnRoot (react-dom.development.js:24504:38)
    at workLoop (scheduler.development.js:256:34)
    at flushWork (scheduler.development.js:225:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)

edit:
It should also be noted that if you enter any json in to the json field and save the document, it is not persisted. Nothing is saved.

In other issues, I have noted that certain field types do not get saved. See #19 and #20, perhaps more.

However, there is no error that is thrown for those instances when those fields don't save and it prevents other fields from being written to when fields that are not working properly are saved.

For example, for those broken field types, I may have required: true and will fill these fields out, despite knowing that they will not work. I will then fill out fields that should work and those fields are not saved, since those "required" fields were not properly saved. I suppose that is the behavior we'd expect-- a required field wasn't saved, so the entire document should not be saved.

However, it still provides us with a success toast.

Feel free to just close and throw this one out, as perhaps resolving those issues all together will solve this... But, perhaps there is something inherently wrong with error handling as well.

Edit:
Perhaps its better to see #25. Sorry for a bit of gibberish above. Issue 25 should cover 19 and 20 and I decided to leave this open, as I believe that despite the issues with drizzle and saving documents, an error should still be thrown; I don't think I should be getting success toast messages.

Cloned the project (everything on version alpha.46), started it with the postgresAdapter, and went into the account page (/admin/account) to change my language from what is selected by default (in my case Hungarian, a.k.a. Magyar) to English, but the select input doesn't seem to work.

Also getting this error in my console:

The following document is associated to my User collection, where the user's email is set for admin.useAsTitle. Inside the collection, it populates. However, here it just says <No User>. I would expect it to use the related document's admin title field. This occurs across multiple projects, with drastically different configurations. I imagine it's the case with all relationship fields.

When generating types in payload with the Postgres Adapter and an idType of 'uuid' the Id's are still typed as numbers even though the database is using uuid's as expected.

The db adapter setup is as below:

db: postgresAdapter({
  idType: "uuid",
  pool: {
    connectionString: process.env.POSTGRES_URI || "",
  },
})

And the types are all typed with numbers:

export interface Organisation {
  id: number;
  createdBy?: (number | null) | User;
  createdAt?: string | null;
  modifiedBy?: (number | null) | User;
  modifiedAt?: string | null;
  name: string;
}

ISSUE
Even after removing autoLogin property from the payload.config.ts when I try to logout the admin user, the following behavior is observed:

• We are redirected to the Logout Successful page
• Console logs show: ERROR: AuthenticationError: The email or password provided is incorrect.
• When I hit log back in, we automatically login without, authentication step.

OBSERVATION
The payload-token cookie is not removed after logout.

PS: Tested the behavior in both Mozilla and Chrome

If I'm logged in, viewing my document at: /admin/collections/unit/1 and I become logged out for inactivity, I opt to log back in and upon relogging, I am redirected to /collections/unit/1, which of course throws a 404. It is missing the /admin prefix.

On every admin page, this error is present.

I believe it could be impacting things like these unexpected color issues?

I'm using yarn 1.22.21, no turbo pack

Not sure what, or if it's urgently effecting anything for certain, but I didn't see an issue for it, so 😅

Using Postgres, pnpm, latest payload-3.0-alpha-demo, all alpha versions are at 41.

I have multiple collection fields that look like this:

  fields: [
    {
      name: "name",
      type: "text",
      localized: true,
    },
    {
      name: "weight",
      type: "number",
    },
  ],

Across all of those collections, when I save, the number I input is simply erased and never saved.

However, I do have slightly more complex use-cases of the number field like this, where they are saved and persist as expected:

 {
          name: "maxLevel",
          type: "number",
          required: true,
          min: 1,
          max: 30,
        },

Link to reproduction

No response

Describe the Bug

When adding an image via the block selector on page creation, there is not save button. If you upload the image via the media uploader directly it does work as expected. If you upload the image without text, it shows as null in the media directory.

Details:

• Chrome Version 122.0.6261.112 (Official Build) (64-bit)
• Windows WSL
• Node v21.6.1
• PostgreSQL
• pnpm

To Reproduce

Create a new page and try to add an image via the block selector http://localhost:3000/admin/collections/pages

Payload Version

3.0 Alpha

Adapters and Plugins

db-postgres

Describe the Bug

Upon using a date field, I get a black screen, with the following console error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `DateTime`.

To Reproduce

Put a date field in any collection

Payload Version

3.0.0-alpha.34

Adapters and Plugins

@payloadcms/[email protected]

Using pnpm, with postgres, the latest payload-3.0-alpha-demo and all packages on alpha.41.

It appears that in many instances, such-as with numbers and relationships (closed issues #19 and #20), these fields are not saving until I restart my dev server, which then triggers drizzle push, I assume.

I believe the expected behavior is that you should not have to restart your dev server in order to reflect config changes? At least this is what I've heard. It also doesn't throw any errors when these saves fail. They essentially appear to save the data, I get a success notification banner, but when I refresh the page, the data is gone. (#23 references errors not being thrown)

 ⨯ Internal error: error: column "backgroundColor" cannot be cast automatically to type enum_pages_blocks_textcontent_background_color
    at /home/thaun/Documents/Projects/payload-3.0-alpha-demo/node_modules/pg-pool/index.js:45:11
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async DrizzleORMPgClient.query (/home/thaun/Documents/Projects/payload-3.0-alpha-demo/node_modules/drizzle-kit/payload.js:34498:21)
    at async apply (/home/thaun/Documents/Projects/payload-3.0-alpha-demo/node_modules/drizzle-kit/payload.js:36648:9)
    at async pushDevSchema (./node_modules/@payloadcms/db-postgres/dist/utilities/pushDevSchema.js:47:5)
    at async Object.connect (./node_modules/@payloadcms/db-postgres/dist/connect.js:84:5)
    at async BasePayload.init (./node_modules/payload/dist/index.js:191:13)

import type { Field } from "payload/types";

const ColorSelect: Field = {
  name: "backgroundColor",
  type: "select",
  options: [
    {
      label: "Dark",
      value: "dark",
    },
    {
      label: "Dark Light",
      value: "dark_light",
    },
    {
      label: "Light",
      value: "light",
    },
    {
      label: "Gray",
      value: "gray",
    },
  ],
} as const;

export default ColorSelect;

Package.json:

{
  "name": "next-latest-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "generate:types": "payload generate:types",
    "start": "next start",
    "lint": "next lint"
  },
  "engines": {
    "node": ">=18.17.0"
  },
  "dependencies": {
    "@payloadcms/db-mongodb": "3.0.0-alpha.44",
    "@payloadcms/db-postgres": "^3.0.0-alpha.44",
    "@payloadcms/next": "3.0.0-alpha.44",
    "@payloadcms/richtext-lexical": "3.0.0-alpha.44",
    "@payloadcms/richtext-slate": "3.0.0-alpha.44",
    "next": "14.2.0-canary.13",
    "payload": "3.0.0-alpha.44",
    "react": "^18",
    "react-dom": "^18",
    "sharp": "0.33.2"
  },
  "devDependencies": {
    "@biomejs/biome": "^1.6.0",
    "@swc/core": "^1.4.6",
    "@swc/register": "^0.1.10",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.4.18",
    "dotenv": "^16.4.5",
    "eslint": "^8",
    "eslint-config-next": "14.1.3",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Link to reproduction

No response

Describe the Bug

When trying to access a page from the graphql playground it seems there is an issue with the graphql dependencies.

Graphql query:

query MyQuery {
  Page(id: 1) {
    content
  }
}

The graphql response:

  {
    "message": "Cannot use GraphQLNonNull \"Int!\" from another module or realm.\n\nEnsure that there is only one instance of \"graphql\" in the node_modules\ndirectory. If different versions of \"graphql\" are the dependencies of other\nrelied on modules, use \"resolutions\" to ensure only one version is installed.\n\nhttps://yarnpkg.com/en/docs/selective-version-resolutions\n\nDuplicate \"graphql\" modules cannot be used at the same time since different\nversions may have different capabilities and behavior. The data from one\nversion used in the function from another could produce confusing and\nspurious results."
  }

npm ls graphql:

npm ERR! code ELSPROBLEMS
npm ERR! invalid: [email protected] /home/rick/development/cms/payload/payload-3.0-alpha-demo/node_modules/.pnpm/[email protected][email protected]/node_modules/graphql
npm ERR! invalid: [email protected] /home/rick/development/cms/payload/payload-3.0-alpha-demo/node_modules/.pnpm/[email protected][email protected]/node_modules/graphql
[email protected] /home/rick/development/cms/payload/payload-3.0-alpha-demo
├─┬ @payloadcms/[email protected] -> ./node_modules/.pnpm/@[email protected][email protected]/node_modules/@payloadcms/db-mongodb
│ └─┬ [email protected] -> ./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/payload
│   └── [email protected] deduped -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
├─┬ @payloadcms/[email protected] -> ./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@payloadcms/db-postgres
│ └─┬ [email protected] -> ./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/payload
│   └── [email protected] deduped -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
├─┬ @payloadcms/[email protected] -> ./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_n_6ip7quxbdbnoaa547fhhftv5la/node_modules/@payloadcms/next
│ ├─┬ @payloadcms/[email protected] -> ./node_modules/.pnpm/@[email protected][email protected]/node_modules/@payloadcms/graphql
│ │ ├─┬ [email protected] -> ./node_modules/.pnpm/[email protected][email protected]/node_modules/graphql-http
│ │ │ └── [email protected] deduped -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
│ │ ├─┬ [email protected] -> ./node_modules/.pnpm/[email protected][email protected]/node_modules/graphql-query-complexity
│ │ │ └── [email protected] invalid: "~14.6.0 || ~15.0.0 || ~16.0.0" from node_modules/.pnpm/[email protected][email protected]/node_modules/graphql-query-complexity -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
│ │ ├─┬ [email protected] -> ./node_modules/.pnpm/[email protected][email protected]/node_modules/graphql-scalars
│ │ │ └── [email protected] -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
│ │ ├─┬ [email protected] -> ./node_modules/.pnpm/[email protected][email protected]/node_modules/graphql-type-json
│ │ │ └── [email protected] invalid: "^15.1.0" from node_modules/.pnpm/[email protected][email protected]/node_modules/graphql-type-json -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
│ │ ├── [email protected] -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
│ │ └─┬ [email protected] -> ./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/payload
│ │   └── [email protected] deduped -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
│ ├─┬ @payloadcms/[email protected] -> ./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_jfbjy7z5cb57jk2sp7gi6jweba/node_modules/@payloadcms/ui
│ │ └─┬ [email protected] -> ./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/payload
│ │   └── [email protected] deduped -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
│ ├─┬ [email protected] -> ./node_modules/.pnpm/[email protected][email protected]/node_modules/graphql-http
│ │ └── [email protected] -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
│ ├── [email protected] -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
│ └─┬ [email protected] -> ./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/payload
│   └── [email protected] deduped -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
├─┬ @payloadcms/[email protected] -> ./node_modules/.pnpm/@[email protected]_@[email protected]_@payloadcms+translation_54yqarbiuabeyzwmmjxqq6fqsu/node_modules/@payloadcms/richtext-lexical
│ └─┬ [email protected] -> ./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/payload
│   └── [email protected] deduped -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
├─┬ @payloadcms/[email protected] -> ./node_modules/.pnpm/@[email protected]_@[email protected]_@payloadcms_klmnlwvtaksju4y37x3ed5aa34/node_modules/@payloadcms/richtext-slate
│ └─┬ [email protected] -> ./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/payload
│   └── [email protected] deduped -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
└─┬ [email protected] -> ./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/payload
  ├─┬ [email protected] -> ./node_modules/.pnpm/[email protected][email protected]/node_modules/graphql-http
  │ └── [email protected] deduped -> ./node_modules/.pnpm/[email protected]/node_modules/graphql
  └── [email protected] -> ./node_modules/.pnpm/[email protected]/node_modules/graphql

Details:

• Chrome Version 122.0.6261.112 (Official Build) (64-bit)
• Windows WSL
• Node v21.6.1
• PostgreSQL

To Reproduce

Run the above query in the playground

Payload Version

3.0 Alpha

Adapters and Plugins

db-postgres

I have a collection, which has a relationship field. As expected, there is a + icon to add a new entry of the related collection. The modal appears and I can create the document, however, there is no save button.

If I press the enter key, it saves the collection I'm editing (not the relationship, but the one that is essentially "under" the modal. This should not be possible either. When a modal is open, all controls should be locked inside of the modal; nothing outside of it should be accessible, until the modal is closed.

Add a tag (relationship)

1. add the following configuration to payload.config.ts

  auth: {
    disableLocalStrategy: true,
    strategies: [
      {
        name: 'default',
        authenticate: async () => {
          return null;
        },
      },
    ],
  },

2. start dev server and open http://localhost:3000/admin
3. The server stops with the following error message

   ERROR: 1: Collection "admins" > "auth.strategies[0]" does not match any of the allowed types
   

Upgrading from alpha.40 to alpha.41 breaks the ability to run payload generate:types, resulting in the following error:

$ payload generate:types
(node:57488) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
file:///D:/.../node_modules/drizzle-kit/payload.mjs:13
  throw Error('Dynamic require of "' + x + '" is not supported');
        ^

Error: Dynamic require of "net" is not supported
    at file:///D:/.../node_modules/drizzle-kit/payload.mjs:13:9
    at node_modules/.pnpm/[email protected]/node_modules/mysql2/lib/connection.js (file:///D:/.../node_modules/drizzle-kit/payload.mjs:32619:15)
    at __require2 (file:///D:/.../node_modules/drizzle-kit/payload.mjs:19:50)
    at node_modules/.pnpm/[email protected]/node_modules/mysql2/index.js (file:///D:/.../node_modules/drizzle-kit/payload.mjs:33955:23)
    at __require2 (file:///D:/.../node_modules/drizzle-kit/payload.mjs:19:50)
    at node_modules/.pnpm/[email protected]/node_modules/mysql2/promise.js (file:///D:/.../node_modules/drizzle-kit/payload.mjs:34023:16)
    at __require2 (file:///D:/.../node_modules/drizzle-kit/payload.mjs:19:50)
    at file:///D:/.../node_modules/drizzle-kit/payload.mjs:36580:30
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)

Node.js v18.19.0

I'm using postgres. sort of wonder why I'm seeing mysql in those errors, but I'll leave that up to you guys 😅 Everything was working fine on alpha.40

/admin/collections/[collection] Search does nothing.

Checked across multiple projects and collections with various configs. All of them do not have search working, so I imagine it doesn't work for anyone? Should be quite an reproduction.

Database adapter: Postgres
Package Manager: pnpm
Payload Alpha Version: 48
Node Version: 18.19.0
Using payload-3.0-alpha-demo example ✅

The CLI incorrectly resolves dependencies and crashes with "module not found" error.

This makes it impossible to build custom components for Payload using Next.js components like next/link and having type generation working. Next.js does not use exports in package.json for its modules, making module discovery in ESM impossible.

Background

Source File: next.config.mjs

import withPayload from '@payloadcms/next/withPayload';

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone', // <-- standalone output mode
};

export default withPayload(nextConfig);

Running pnpm build generates files and folders to run the app a standalone mode.

Wherein we expect this behavior:

* - `'standalone'`: A standalone build output, `.next/standalone` directory, 
that only includes necessary files/dependencies.
Useful for self-hosting in a Docker container.

This output server.js file should run the server as normal simply using node server.js

.next
  /standalone
    ...
    server.js

We can run this using:

🔥:cd .next
🔥:cd standalone 
🔥:node server.js 
   ▲ Next.js 14.2.0-canary.7
   - Local:        http://localhost:3000
   - Network:      http://0.0.0.0:3000

 ✓ Ready in 53ms

Issue

Some users are saying they are getting an error that modules are missing such as pino, when they try to run node server.js from generated standalone directory.

Steps to reproduce:

1. Visit https://next-payload-3-0-test.vercel.app/admin/forgot
2. Focus the email field
3. Press any key

771-55ddd206a39b39f6.js:63 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at t.Z (771-55ddd206a39b39f6.js:63:61259)
    at 771-55ddd206a39b39f6.js:63:58011
    at 771-55ddd206a39b39f6.js:63:132337
    at 771-55ddd206a39b39f6.js:63:132651
    at 771-55ddd206a39b39f6.js:63:137920

Using Postgres, pnpm, latest payload-3.0-alpha-demo, all alpha versions are at 41.

Create a collection field with type of relationship, then create a document in that collection, selecting a document to relate to.

Saves successfully, but upon refreshing the page, the relationships are not persisted.

Upon upgrading my payload packages from 3.0.0-alpha.34 to 3.0.0-alpha.35, I cannot use the payload admin panel at all. I get these errors.

It should be notated that I am using translations (two locales);

Browser error:

Unhandled Runtime Error
Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

Terminal error:

./node_modules/@payloadcms/translations/dist/_generatedFiles_/api/index.js
The generated code contains 'async/await' because this module is using "topLevelAwait".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.

Import trace for requested module:
./node_modules/@payloadcms/translations/dist/_generatedFiles_/api/index.js
./node_modules/payload/dist/translations/extractTranslations.js
./node_modules/payload/dist/exports/utilities.js
./node_modules/@payloadcms/ui/dist/hooks/useHotkey.js

Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at ak (D:\businesses\boldmedia\web\boldmedia\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46775)

other packages I'm using (versions align):
@payloadcms/postgres
@payloadcms/next
@payloadcms/richtext-lexical
@payloadcms/ui

Using:
payload migrate

Causes ESM module errors

This type of error occurs for any Payload Migration

import { getPayload } from 'payload'

import payloadConfig from '../../payload.config.js'

export const getPayloadClient = () => getPayload({ config: payloadConfig })

Upon running the local api script outside the payload project, it throws scss errors:

Steps to reproduce-

1. Create a local api script to seed the data
2. Run the script using ‘node script.js’ or ‘ts-node script.js’

When generating types the script fails when external packages are used within custom files.

I have noticed this occur with the following packages:

• next/headers
• next/navigation
• @payloadcms/ui

I imagine there will be more however these are the ones I have found.

An example of the error shown:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/{{MY DIRECTORY PATH}}/node_modules/@payloadcms/ui/dist/exports/forms.js' imported from /{{MY DIRECTORY PATH}}/src/components/admin-fields/ColourPicker/ColourPickerField.tsx
    at finalizeResolution (node:internal/modules/esm/resolve:264:11)
    at moduleResolve (node:internal/modules/esm/resolve:917:10)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at nextResolve (node:internal/modules/esm/hooks:749:28)
    at resolve (file:///{{MY DIRECTORY PATH}}/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/payload/dist/bin/register/index.js:59:12)
    at nextResolve (node:internal/modules/esm/hooks:749:28)
    at Hooks.resolve (node:internal/modules/esm/hooks:237:30)
    at handleMessage (node:internal/modules/esm/worker:199:24)
    at Immediate.checkForMessages (node:internal/modules/esm/worker:141:28)
    at process.processImmediate (node:internal/timers:478:21) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///{{MY DIRECTORY PATH}}/node_modules/@payloadcms/ui/dist/exports/forms.js'
}

The component this issue is pointing to is:

"use client";

import type React from "react";
import {
  Label,
  type TextFieldProps,
  useField,
  Text,
} from "@payloadcms/ui/forms";
import { validateHexColour } from "./utils/validateHexColour";
import { HexColorPicker } from "react-colorful";

export const ColourPickerField: React.FC<TextFieldProps> = ({
  path,
  label,
  required,
  name,
}) => {
  const { value, setValue } = useField({
    path,
    validate: validateHexColour,
  });

  return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "1rem",
        }}
      >
        <Label label={label} htmlFor={path} required={required} />
        <HexColorPicker
          style={{ display: "flex", width: "100%" }}
          color={(value as string) ?? ""}
          onChange={setValue}
        />
        <Text name={name} path={path} />
      </div>
    );
};

Error

TypeError: Cannot read properties of null (reading 'useContext')

• This error occurs strictly when using pnpm dev --turbo which enables Turbopack.
• This error occurs after making changes to existing files.

To reproduce, run payload with Turbopack, then edit the default collection in the config by adding and saving some code like this:

const test = 1; // Add this line of code, then save the file

export default buildConfig({
  ...
});

Here's what I see:

And here's the CollectionConfig for that table:

export const Unit: CollectionConfig = {
  slug: "unit",
  labels: {
    singular: "Unit",
    plural: "Units",
  },
  admin: {
    useAsTitle: "name",
    defaultColumns: [
      "name",
      "slug",
      "leadership",
      "type",
      "category",
      "updatedAt",
    ],
  },
  fields: [
    {
      type: "tabs",
      tabs: [
        {
          label: "General",
          fields: [
            {
              name: "name",
              type: "text",
              required: true,
              localized: true,
            },
            {
              name: "tags",
              type: "relationship",
              hasMany: true,
              relationTo: "unit-tag",
            },
            {
              type: "row",
              fields: [
                {
                  name: "leadership",
                  type: "number",
                  required: true,
                  max: 500,
                  min: 0,
                  admin: {
                    step: 5,
                  },
                },
                {
                  name: "stars",
                  type: "number",
                  required: true,
                  min: 0.5,
                  max: 5,
                  admin: {
                    step: 0.5,
                  },
                },
                {
                  name: "maxLevel",
                  type: "number",
                  required: true,
                  min: 1,
                  max: 30,
                },
              ],
            },
            {
              type: "row",
              fields: [
                {
                  name: "type",
                  type: "relationship",
                  relationTo: "unit-type",
                  required: true,
                },
                {
                  name: "category",
                  type: "relationship",
                  relationTo: "unit-category",
                  required: true,
                },
                {
                  name: "era",
                  type: "relationship",
                  relationTo: "unit-era",
                  required: true,
                },
              ],
            },
          ],
        },
        {
          name: "veterancy",
          fields: [
            {
              name: "nodes",
              labels: {
                singular: "Node",
                plural: "Nodes",
              },
              type: "array",
              fields: [
                {
                  name: "name",
                  type: "text",
                },
                {
                  name: "description",
                  type: "richText",
                },
              ],
            },
          ],
        },
(...abunch more)

I do believe at a minimum, all of the non-relationship fields should be present? Things like the name being missing shouldn't happen?

So yeah... Missing a lot of columns that should be available.

I do have other collections where the name property comes through in a column, so I'm really unsure what could possibly cause some collections to behave one way and the others to behave completely differently.

I have restarted the dev server and made sure that all drizzle pushes go through.

Database adapter: Postgres
Package Manager: pnpm
Payload Alpha Version: 48
Node Version: 18.19.0
Using payload-3.0-alpha-demo example ✅

Link to reproduction

No response

Describe the Bug

When creating an new user, the notification at the bottom of the page shows [object Object].

Details:

• Chrome Version 122.0.6261.112 (Official Build) (64-bit)
• Windows WSL
• Node v21.6.1
• PostgreSQL

To Reproduce

Go to http://localhost:3000/admin/collections/users and create a new user.

Payload Version

3.0 Alpha

Adapters and Plugins

db-postgres

Currently README.md points to https://github.com/payloadcms/payload for opening issues.

I added 3 issues there yesterday related to the V3 alpha repo:

• 5300
• 5299
• 5298

I encountered an issue while working with the alpha version of @payloadcms/plugin-cloud-storage. Initially, everything appeared to function correctly until I attempted to upload or delete files. At that point, I received the following error message:

To troubleshoot, I dived into @payloadcms/plugin-cloud-storage/dist/adapters/s3/index.js and inserted a console.log for AWS.S3. At this point, AWS.S3 was undefined, which indicated the module wasn't being properly recognized or instantiated.

I then decided to install @aws-sdk/client-s3 directly into my project's local repository. After doing so, AWS.S3 became defined, and the issue was resolved, enabling both uploading and deleting functionalities to work as expected.

Upon reviewing the package dependencies, I noticed that @aws-sdk/client-s3 is listed as a dev dependency within @payloadcms/plugin-cloud-storage. Although I'm not certain, this could potentially be related to the issue. Currently, the workaround I'm employing is to explicitly install @aws-sdk/client-s3 in the local repository.

For context, I am using pnpm version 8.14.3. This solution might be helpful for anyone facing a similar issue or for investigating the cause further.

filterOptions are next actions? I added "use server" and made them async for now. It's been a while since I used Next last time, so will need a refresher.

Some of my custom components, like row labels, are rendered blank. It's the same for the nested-docs plugin breadcrumbs. I need to take a look at how this is handled.

Pulling this info from discord

When clicking between collections, there is some flicker on the breadcrumbs.

Here is my array field:

  {
          label: "Mastery Nodes",
          fields: [
            {
              name: "masteryNodes",
              type: "array",
              labels: {
                singular: "Node",
                plural: "Nodes",
              },
              fields: [
                {
                  name: "title",
                  type: "text",
                  required: true,
                  localized: true,
                },
                {
                  name: "description",
                  type: "richText",
                  required: true,
                  localized: true,
                },
              ],
            },
          ],
        },

It appears to be with any inner field-type for the array. I switched richText with a text field for example. When I create an array field like that, initially, no errors occur until I restart my dev server. (Reference #25) Once the config/drizzle update goes in, from that point forward, array fields experience the following errors;

Next Error:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'value')

Call Stack
eval
node_modules\.pnpm\@[email protected]_@[email protected][email protected][email protected]_vhdarcvh7s7zt25x34a6r7pun4\node_modules\@payloadcms\ui\dist\forms\Form\mergeServerFormState.js (11:1)
Array.forEach
<anonymous>
mergeServerFormState
node_modules\.pnpm\@[email protected]_@[email protected][email protected][email protected]_vhdarcvh7s7zt25x34a6r7pun4\node_modules\@payloadcms\ui\dist\forms\Form\mergeServerFormState.js (9:1)
fields
node_modules\.pnpm\@[email protected]_@[email protected][email protected][email protected]_vhdarcvh7s7zt25x34a6r7pun4\node_modules\@payloadcms\ui\dist\forms\Form\index.js (465:68)

DevTools Error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value')
    at eval (mergeServerFormState.js:16:46)
    at Array.forEach (<anonymous>)
    at mergeServerFormState (mergeServerFormState.js:14:30)
    at executeOnChange (index.js:504:126)
...

Database adapter: Postgres
Package Manager: pnpm
Payload Alpha Version: 41
Node Version: 18.19.0
Using payload-3.0-alpha-demo example ✅

Video:
https://gyazo.com/0002b4969adf43b18c1a3aca195e7a4b

Reopening, reference to #29

When reordering columns from ListView on the /admin/collections/user page for example and then refreshing the page, or navigating away and coming back, those values are not persisted to preferences.

It appears to only be happening with my User collection, so perhaps only auth enabled collections, or whatever collection is set as the user collection in the config's admin.user?

See this comment if more info is needed

These fields are not showing values in the UI

In a collection, setting the following will not hide the collection from the admin panel. If I recall correctly, access.admin is meant to hide the collection for specific roles, correct?

To test it, I simply set the following:

access: {
    admin: () => false,
}

However, it still shows up for all roles.

for access.create, I for example has it set to true, which allowed any user to create users. Then, I changed it to the following:

create: ({ req }) => checkRole(["admin"], req.user),

Yet, I still had the option to create users, until I restarted my dev server (not a prod issue I guess, but I believe we should not be required to restart dev server?).

For access.read, I tested it with the same sort of function that is in the access control guide video within the docs; adminOrSelf, where you should be able to read the user if you are an admin, OR the document belongs to the currently logged in user. However, the Users collection was still visible and it allowed me to click on and visit any user (read), which I believe is not expected.

Lastly, when I simply set the following;

 read: () => false,

It finally made it so that I could not see the Users collection, which is expected in this case. However, when I visit my own profile with the profile icon in the top right, breadcrumbs are visible at the top of the layout. I can then click Users and read the entire table of all users. With the column filter, I can view the data in all roles (and effectively read it). I get a 404 when I try to visit one of the user's document pages, which is ideal, I guess? However, it doesn't really matter, because as I said, they are still able to somehow view that data inside of the collection table.

Field level access control seems completely broken.

I hope everything I've said makes sense. Overall, I find access control to feel quite wonky and I'm not sure it's in a usable state.

Hello I noticed that custom cells do not seem to have the cell data passed to them.

I have a simple cell component as shown below used as a colour picker cell.

import type React from "react";
import type { CellComponentProps } from "payload/types";

export const ColourPickerCell: React.FC<CellComponentProps> = ({
  cellData,
}) => {
  if (!cellData) return null;
  
  return (
    <div
      style={{
        border: "solid",
        borderWidth: "2px",
        borderColor: "white",
        borderRadius: "50%",
        height: "2rem",
        width: "2rem",
        backgroundColor: cellData as string,
      }}
    />
  );
};

I decided to log out the props being used to determine the reason my cells would never render and the props passed to the component are the following:

{
    "name": "textColour",
    "blocks": false,
    "fieldType": "text",
    "isFieldAffectingData": true,
    "label": "Text Colour"
}

This is the object being used to set the custom cell component

admin: {
  components: {
	  Field: ColourPickerField,
	  Cell: ColourPickerCell,
  },
},

As you can see the cellData is never actually passed so the field will not render (in my instance)

I found that as I was attempting a similar situation to the one below:

import { Block } from 'payload/types'

const Banner: Block = {
  slug: 'Banner', // required
  imageURL: 'https://placehold.co/600x400',
  imageAltText: 'A nice thumbnail image to show what this block looks like',
  interfaceName: 'BannerBlock', // optional
  fields: [
    {
      type: 'group',
      name: 'link',
      fields: [
        {
          type: 'row',
          fields: [
            {
              type: 'text',
              name: 'text',
            },
          ],
        },
      ],
    },
  ],
}

export default Banner

That every time I saved, it never actually did so to the database and in fact comes back as a blank field on the response to the save.

When trying to run "npm run dev" with ubuntu terminal, I´ve got the follow error:

/payload-3.0-alpha-demo/node_modules/.bin/../@payloadcms/next/dist/bin/index.js: 1: import: not found
/payload-3.0-alpha-demo/node_modules/.bin/../@payloadcms/next/dist/bin/index.js: 2: Syntax error: "(" unexpected

Example:

Setup to reproduce:

export default buildConfig({
  ...

  localization: {
    locales: ['en', 'es', 'de'],
    defaultLocale: 'en',
    fallback: true,
  },
})

This error happens regardless of database adapter and on fresh installs.

[email protected] dev
cross-env NODE_OPTIONS=--no-deprecation next dev

node:internal/child_process:421
throw errnoException(err, 'spawn');
^

Error: spawn Unknown system error -8
at ChildProcess.spawn (node:internal/child_process:421:11)
at Object.spawn (node:child_process:761:9)
at spawn (/payload-3.0-alpha-demo/node_modules/cross-spawn/index.js:12:24)
at crossEnv (/payload-3.0-alpha-demo/node_modules/cross-env/src/index.js:13:18)
at Object. (/payload-3.0-alpha-demo/node_modules/cross-env/src/bin/cross-env.js:5:1)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12) {
errno: -8,
code: 'Unknown system error -8',
syscall: 'spawn'
}

If you reorder columns in any Collection table (aka ListView) and refresh the page, or leave and come back, the order is not persisted.

Also, if you set defaultColumns in a collection's admin.defaultColumns, it also does not work. I even wiped my database to ensure those defaultColumns are never loaded in.

Should be fairly straight forward to reproduce; I'm using postgres if it matters and all alpha version are on alpha.41, with pnpm, using the latest payload-3.0-alpha-demo repo.

Using Windows Powershell, I got this error when try to run npm run dev.

When reordering columns from ListView on the /admin/collections/user page for example and then refreshing the page, or navigating away and coming back, those values are not persisted to preferences.

The first column is the place where you can click to navigate to a document. I've had scenarios where the first value wasn't required and for whatever reason the "default" view I have happens to be a blank field, which means that there is no way to navigate to that document via the UI. Even more troublesome is that if you reorder a different field to be in the first position, it does not update, effectively applying the anchor element to the new first column. It becomes even more annoying when you refresh the page, to find that the order is also not persisted, so there is essentially no way to access a document in some scenarios.

Overall, the columns feel like they could use a good looking at.

Database adapter: Postgres
Package Manager: pnpm
Payload Alpha Version: 41
Node Version: 18.19.0
Using payload-3.0-alpha-demo example ✅

Reproducable way: Editing the the payload.config.ts, just adding a comment or editing one, would cause this error:

[15:11:21] ERROR: TypeError: Cannot read properties of undefined (reading 'referencedTable')
    at normalizeRelation (webpack-internal:///(rsc)/./node_modules/drizzle-orm/relations.js:211:56)
    at PgDialect.buildRelationalQueryWithoutPK (webpack-internal:///(rsc)/./node_modules/drizzle-orm/pg-core/dialect.js:963:101)
    at QueryPromise._getQuery (webpack-internal:///(rsc)/./node_modules/drizzle-orm/pg-core/query-builders/query.js:90:25)
    at QueryPromise._toSQL (webpack-internal:///(rsc)/./node_modules/drizzle-orm/pg-core/query-builders/query.js:105:24)
    at eval (webpack-internal:///(rsc)/./node_modules/drizzle-orm/pg-core/query-builders/query.js:69:42)
    at Object.startActiveSpan (webpack-internal:///(rsc)/./node_modules/drizzle-orm/tracing.js:14:14)
    at QueryPromise._prepare (webpack-internal:///(rsc)/./node_modules/drizzle-orm/pg-core/query-builders/query.js:68:60)
    at eval (webpack-internal:///(rsc)/./node_modules/drizzle-orm/pg-core/query-builders/query.js:114:19)
    at Object.startActiveSpan (webpack-internal:///(rsc)/./node_modules/drizzle-orm/tracing.js:14:14)
    at QueryPromise.execute (webpack-internal:///(rsc)/./node_modules/drizzle-orm/pg-core/query-builders/query.js:113:60)
    at QueryPromise.then (webpack-internal:///(rsc)/./node_modules/drizzle-orm/query-promise.js:26:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Unsure that the error has also occurred without editing that specific file.

package.json

{
  "name": "next-latest-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "generate:types": "payload generate:types",
    "start": "next start",
    "lint": "next lint"
  },
  "engines": {
    "node": ">=18.17.0"
  },
  "dependencies": {
    "@payloadcms/db-mongodb": "3.0.0-alpha.34",
    "@payloadcms/db-postgres": "^3.0.0-alpha.34",
    "@payloadcms/next": "3.0.0-alpha.34",
    "@payloadcms/richtext-lexical": "3.0.0-alpha.34",
    "@payloadcms/richtext-slate": "3.0.0-alpha.34",
    "next": "14.2.0-canary.9",
    "payload": "3.0.0-alpha.34",
    "react": "^18",
    "react-dom": "^18",
    "sharp": "0.32.6"
  },
  "devDependencies": {
    "@biomejs/biome": "1.5.3-nightly.4fa841c",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.4.18",
    "dotenv": "^16.4.5",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}