Content disappearing after save with next-payload

arielarial

last month

Hello, all! I'm getting this weird bug when I save content with next-payload. After save, the page blinks and all content is gone until refreshed.

After I got this behavior in the repo I'm working, I cloned the next-payload-demo and made changes only to

.env.local

file. Same issue.

I made this screen capture to show what's happening, as well as the console errors. Am I missing some config, maybe?

Here are the changes I've made in

.env.local

. I left S3 stuff blank because I'm using GCS and didn't want to mess with this for the example

MONGODB_URI=mongodb://localhost/payload-vercel-functions
PAYLOAD_SECRET=YOUR_SECRET_HERE
PAYLOAD_CONFIG_PATH=dist/payload.config.js
NEXT_PUBLIC_APP_URL=http://localhost:3000
PAYLOAD_PUBLIC_CMS_URL=http://localhost:3000
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
S3_REGION=
NEXT_PUBLIC_S3_ENDPOINT=
NEXT_PUBLIC_S3_BUCKET=
PAYLOAD_PRIVATE_REGENERATION_SECRET=123123
NEXT_PRIVATE_REGENERATION_SECRET=123123

thisisnotchris
last month
This is so odd, as the errors don't even seem super related to the main issue

@arielarial Did you follow this repo example?
https://github.com/payloadcms/next-payload

Maybe that would be better than the other demo
arielarial
last month
Yeah, at first I tried to follow the steps from "next-payload". As I was getting these errors, I tried to clone the demo, and got the same behavior :/
thisisnotchris
last month
I'm surprised there aren't more reports of errors

Especially if you used the demo as it is
arielarial
last month
yeah, me too. I was wondering if it has something to do with my environment, node version, I don't know
thisisnotchris
last month
Hmm whats your enviornment like?

Happy to help debug
arielarial
last month
I'm usign Node with nvm @ v16.16.0

not sure what else should be looking into

thisisnotchris

last month

I think your node version is OK, though as a note, we are using node version

v19.8.1

I think next lets check out your package json

Here is the relevant part of ours:

  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.18.2",
    "jsonwebtoken": "^8.5.1",
    "payload": "^1.6.32"
  },
  "devDependencies": {
    "@types/express": "^4.17.17",
    "copyfiles": "^2.4.1",
    "cross-env": "^7.0.3",
    "nodemon": "^2.0.6",
    "ts-node": "^9.1.1",
    "typescript": "^4.8.4"
  }

(We may have a couple of extra packages, but I'm mainly looking at payload)

I know the next project provides a few extra packages too

arielarial

last month

hm, it looks close enough:

{
  "name": "next-payload-demo",
  "description": "Demo of Payload deployed as Vercel functions within NextJS",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "lint": "next lint",
    "install:payload": "next-payload install",
    "build:next": "next build",
    "build": "yarn build:next",
    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=payload/payload.config.ts payload generate:types",
    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=payload/payload.config.ts payload generate:graphQLSchema"
  },
  "dependencies": {
    "@aws-sdk/client-s3": "^3.245.0",
    "@aws-sdk/lib-storage": "^3.276.0",
    "@faceless-ui/css-grid": "^1.2.0",
    "@faceless-ui/modal": "^2.0.1",
    "@payloadcms/next-payload": "^0.0.16",
    "@payloadcms/plugin-cloud-storage": "^1.0.14",
    "@payloadcms/plugin-seo": "^1.0.10",
    "@swc/wasm": "^1.3.35",
    "@vercel/edge": "^0.1.2",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "next": "^13.2.4-canary.6",
    "payload": "^1.6.32",
    "payload-admin-bar": "^1.0.5",
    "pino-pretty": "^9.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sass": "^1.58.2",
    "sass-loader": "^13.2.0"
  },
  "devDependencies": {
    "@swc/core": "^1.3.35",
    "@types/express": "^4.17.9",
    "@types/node": "^18.11.18",
    "@types/react": "^18.0.28",
    "copyfiles": "^2.4.1",
    "cross-env": "^7.0.3",
    "eslint": "8.31.0",
    "eslint-config-next": "13.1.1",
    "nodemon": "^2.0.6",
    "ts-node": "^9.1.1",
    "typescript": "^4.8.4"
  }
}

Also tried to build && start to see if it was related to

yarn dev

, but it was the same

thisisnotchris
last month
Looking over it

your payload/next package looks updated

that got an update 12 days ago

As far as barebones goes...

Have you ruled out the extra plugins you have

possibly causing issue

@arielarial If you happen to have your project on a repo, I'm happy to do a code review

arielarial

last month

about plugins, the repo that I started was a next project that I used npx to install payload. So it didn't have plugins, and had the same issue

"dependencies": {
    "@payloadcms/next-payload": "^0.0.16",
    "i18next": "^22.4.14",
    "modern-normalize": "^1.1.0",
    "next": "latest",
    "payload": "^1.6.32",
    "payload-base64-plugin": "^1.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": "^5.3.5"
  },
  "devDependencies": {
    "@types/node": "^18.0.0",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "@types/styled-components": "^5.1.25",
    "typescript": "^4.7.4"
  }

do you get the same errors if you clone next-payload-demo and set .env.local like I did?

thisisnotchris
last month
IS that your current package.json?
arielarial
last month
the last one I sent was from my first try. I think I used create-next-app and then npx to install next-payload
thisisnotchris
last month
hmm

and sorry, covering bases here

you created a new mongo db named "payload-vercel-functions"

?
arielarial
last month
lol, yeah. it is running
thisisnotchris
last month
had to check hehe
arielarial
last month
ahahahahha sure!

but I think payload doesn't even start if it can't connect to a Mongo db
thisisnotchris
last month
true

so we can rule out your .env vars not being picked up

because then the mongourl wouldnt be picked up
arielarial
last month
hm, that's right

but I'm curious. if you clone the demo repo can you reproduce?
Jarrod
Payload Team
last month
I am wondering, is this specific to globals for you?
thisisnotchris
last month
@arielarial ill try it out now
arielarial
last month
let me try out with a collection, @Jarrod
Jarrod
Payload Team
last month
@arielarial awesome ty, I would try with the same config structure too. i.e. use an array of links!
arielarial
last month
ok, that's something! It's not happening inside a collection

I copy/pasted the same field and it worked as it should
thisisnotchris
last month
its building 😮

slowly but surely lol

hmmm

OK so i couldn't replicate locally (or run it locally lol)

But i think that is just my setup

I'm guessing this is related to globals vs collections
arielarial
last month
yeah, it looks like it. Should I open an issue @Jarrod ?
Jarrod
Payload Team
last month
Beautiful

yes please do!

thank you for narrowing it down

open it on the next-payload repo

pleaaaase 🙏
arielarial
last month
ahahahahah nice, will do. thanks!

thank you as well, @thisisnotchris !
thisisnotchris
last month
of course my friend, good luck!
itsjxck
last month
I noticed this issue was closed on Github, and I am using the latest release (v0.0.20) of
next-payload
but I am getting similar behaviour in collections. I have a relationship field which refuses to save, regardless of the fact the Admin UI says it was a successful save
thisisnotchris
last month
@itsjxck Is it with collections specifically? Or Globals?
itsjxck
last month
Collections

I don’t currently have any globals in my config

Open the post

Continue the discussion in Discord

Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.