payloadcms / payload-3.0-demo Goto Github PK
View Code? Open in Web Editor NEWThe official demo for Payload 3.0
Home Page: https://next-payload-3-0-test.vercel.app
The official demo for Payload 3.0
Home Page: https://next-payload-3-0-test.vercel.app
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"
}
}
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
{
slug: "pages",
admin: {
useAsTitle: "title",
},
fields: [
{
name: "title",
type: "text",
},
{
name: "path",
type: "text",
},
{
type: "tabs",
tabs: [
{
label: "Content",
description: "Text Content",
fields: [
{
name: "contentblocks",
type: "blocks",
blocks: [
{
slug: "textcontent",
fields: [
{
name: "contentHeader",
type: "text",
required: true,
},
{
name: "text",
type: "richText",
},
{
name: "backgroundImage",
type: "upload",
relationTo: "media",
},
{
name: "backgroundColor",
type: "text",
},
],
},
],
},
],
},
],
},
],
}
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.
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;
}
[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'
}
/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 ✅
No response
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:
Create a new page and try to add an image via the block selector http://localhost:3000/admin/collections/pages
3.0 Alpha
db-postgres
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-
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.
Using Windows Powershell, I got this error when try to run npm run dev.
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
Steps to reproduce:
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
When generating types the script fails when external packages are used within custom files.
I have noticed this occur with the following packages:
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>
);
};
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
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.
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.
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.
No response
When creating an new user, the notification at the bottom of the page shows [object Object]
.
Details:
Go to http://localhost:3000/admin/collections/users
and create a new user.
3.0 Alpha
db-postgres
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.
ISSUE
Even after removing autoLogin
property from the payload.config.ts
when I try to logout the admin user, the following behavior is observed:
ERROR: AuthenticationError: The email or password provided is incorrect.
OBSERVATION
The payload-token
cookie is not removed after logout.
PS: Tested the behavior in both Mozilla and Chrome
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.
payload.config.ts
auth: {
disableLocalStrategy: true,
strategies: [
{
name: 'default',
authenticate: async () => {
return null;
},
},
],
},
http://localhost:3000/admin
ERROR: 1: Collection "admins" > "auth.strategies[0]" does not match any of the allowed types
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 ✅
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
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.
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.
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.
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.
TypeError: Cannot read properties of null (reading 'useContext')
pnpm dev --turbo
which enables Turbopack.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({
...
});
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.
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.
⨯ 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"
}
}
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 ✅
No response
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:
Run the above query in the playground
3.0 Alpha
db-postgres
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)
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
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 ✅
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,
},
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)
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
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.
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`.
Put a date field in any collection
3.0.0-alpha.34
@payloadcms/[email protected]
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 clicking between collections, there is some flicker on the breadcrumbs.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.