Content disappearing after save with next-payload

default discord avatar
arielarial
10 months ago
68

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
  • default discord avatar
    thisisnotchris
    10 months ago

    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

  • default discord avatar
    arielarial
    10 months ago

    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 :/

  • default discord avatar
    thisisnotchris
    10 months ago

    I'm surprised there aren't more reports of errors



    Especially if you used the demo as it is

  • default discord avatar
    arielarial
    10 months ago

    yeah, me too. I was wondering if it has something to do with my environment, node version, I don't know

  • default discord avatar
    thisisnotchris
    10 months ago

    Hmm whats your enviornment like?



    Happy to help debug

  • default discord avatar
    arielarial
    10 months ago

    I'm usign Node with nvm @ v16.16.0



    not sure what else should be looking into

  • default discord avatar
    thisisnotchris
    10 months ago

    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

  • default discord avatar
    arielarial
    10 months ago

    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

  • default discord avatar
    thisisnotchris
    10 months ago

    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

  • default discord avatar
    arielarial
    10 months ago

    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?

  • default discord avatar
    thisisnotchris
    10 months ago

    IS that your current package.json?

  • default discord avatar
    arielarial
    10 months ago

    the last one I sent was from my first try. I think I used create-next-app and then npx to install next-payload

  • default discord avatar
    thisisnotchris
    10 months ago

    hmm



    and sorry, covering bases here



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



    ?

  • default discord avatar
    arielarial
    10 months ago

    lol, yeah. it is running

    image.png
  • default discord avatar
    thisisnotchris
    10 months ago

    had to check hehe

  • default discord avatar
    arielarial
    10 months ago

    ahahahahha sure!



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

  • default discord avatar
    thisisnotchris
    10 months ago

    true



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



    because then the mongourl wouldnt be picked up

  • default discord avatar
    arielarial
    10 months ago

    hm, that's right



    but I'm curious. if you clone the demo repo can you reproduce?

  • default discord avatar
    Jarrod
    10 months ago

    I am wondering, is this specific to globals for you?

  • default discord avatar
    thisisnotchris
    10 months ago

    @arielarial ill try it out now

  • default discord avatar
    arielarial
    10 months ago

    let me try out with a collection, @Jarrod

  • default discord avatar
    Jarrod
    10 months ago

    @arielarial awesome ty, I would try with the same config structure too. i.e. use an array of links!

  • default discord avatar
    arielarial
    10 months ago

    ok, that's something! It's not happening inside a collection



    I copy/pasted the same field and it worked as it should

  • default discord avatar
    thisisnotchris
    10 months ago

    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

  • default discord avatar
    arielarial
    10 months ago

    yeah, it looks like it. Should I open an issue @Jarrod ?

  • default discord avatar
    Jarrod
    10 months ago

    Beautiful



    yes please do!



    thank you for narrowing it down



    open it on the next-payload repo



    pleaaaase ๐Ÿ™

  • default discord avatar
    arielarial
    10 months ago

    ahahahahah nice, will do. thanks!



    thank you as well, @thisisnotchris !

  • default discord avatar
    thisisnotchris
    10 months ago

    of course my friend, good luck!

  • default discord avatar
    itsjxck
    10 months ago

    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

  • default discord avatar
    thisisnotchris
    10 months ago

    @itsjxck Is it with collections specifically? Or Globals?

  • default discord avatar
    itsjxck
    10 months ago

    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.