[BUG] All layouts disappear from view when adding new layouts to existing page

default discord avatar
snailedlt
3 weeks ago
12

Is there any easy explanation as to why layouts for my pages only show up when I initially create the page? If I edit the layout, and add multiple blocks it appears as if there's no layout at all, but the layout still shows up just fine in the mongodb database.



This happens even in the

next-payload-demo

repo's latest main branch


https://github.com/payloadcms/next-payload-demo/tree/61597476e18cd920001fcca95b7fd7b45b374480


[BUG] All layout disappear from view when adding new layouts to existing page



I tried an older commit from the main branch and it works fine:

https://github.com/payloadcms/next-payload-demo/tree/e413c3f0522cc91d69504b2085cd10442b9fff8b

It's most likely an issue with one of the depedency updates.



I'll test some more commits to find out which commit breaks it



Odd, now it works on the latest version for me



turns out the issue was moving to pnpm from yarn. When doing so I added the following dependencies:


    "snappy": "^7.2.2",
    "aws-crt": "^1.18.0",
    "aws4": "^1.12.0",
    "bson-ext": "^4.0.3",
    "kerberos": "^2.0.1",
    "lucide-react": "^0.268.0",
    "mongodb": "^5.7.0",
    "mongodb-client-encryption": "^2.9.0",
    "mongoose": "^7.4.3"


I don't see why this should be an issue though. pnpm is a requirement for our repo, since it is a turborepo using pnpm-workspaces.



Could any of the staff let me know if there's a quick fix for this issue?



[BUG] All layouts disappear from view when adding new layouts to existing page



Steps to reproduce

1. Download the

next-payload-demo

repo:

https://github.com/payloadcms/next-payload-demo/tree/61597476e18cd920001fcca95b7fd7b45b374480

2. run


yarn install
pnpm import

3. delete

yarn.lock

4. add the following dependencies to

package.lock
    "snappy": "^7.2.2",
    "aws-crt": "^1.18.0",
    "aws4": "^1.12.0",
    "bson-ext": "^4.0.3",
    "kerberos": "^2.0.1",
    "lucide-react": "^0.268.0",
    "mongodb": "^5.7.0",
    "mongodb-client-encryption": "^2.9.0",
    "mongoose": "^7.4.3"

5. run


pnpm install
pnpm dev

6. follow the steps in the video at the top of this thread to add a new page with a content layout, edit the page and add more layouts/blocks.



[BUG] All layouts disappear from view when adding new layouts to existing page (pnpm only)



update again.


After reverting to yarn by using

git reset --hard 61597476e18cd920001fcca95b7fd7b45b374480

the issue still persists, so this might be a cache issue or something



I also get this console log when creating or updating a page:


[10:19:05] INFO (payload): Error hitting regeneration route for '/testing-six'

testing-six

is the slug of the page I made



deleting the

.next

doesn't help either



Interesting. In the database the pages that don't work get saved as an object of objects, while the ones that work get saved as an array of objects.



Now this is interesting!


The datatype changes from array of objects to object of objects when editing an existing page.


In other words, when first creating a page the layout is and arrayof objects, when editing an existing page the layout changes to an object of objects.



[BUG] All layouts disappear from view when adding new layouts to existing page



I made an issue explaining my findings in a more concise manner here:

https://github.com/payloadcms/next-payload-demo/issues/9
  • discord user avatar
    jarrod_not_jared
    Payload Team
    3 weeks ago

    @snailedlt anyway you can upload the whole video? That one looks like its 0 seconds

  • default discord avatar
    snailedlt
    3 weeks ago

    @jarrod_not_jared yes, sorry about that. Here it is



    I update the video on the github issue as well



    I commented on the github issue too. Should we continue the convo there instead, or would you like to proceed here?



    I've confirmed that the issue is related to node_modules. Deleting node_modules and re-running

    yarn

    fixed the issue. Re-running

    pnpm import

    and

    pnpm install & pnpm dev

    after deleting node_modules made it work. Now I just need to add some missing peerdependencies for it to work correctly with pnpm

  • discord user avatar
    jarrod_not_jared
    Payload Team
    3 weeks ago

    NICE



    here is probably fine, but either will work



    I am on discord more than GH comment threads, but I do check them!



    I think adding 1 pkg at a time to see who the culprit is, is the next step right?

  • default discord avatar
    snailedlt
    3 weeks ago

    yup



    unrelated to this (maybe), but I thought I should mention it here since I just found it. There's a few errors and warnings that pop up when starting up the dev server and visiting /admin



    Full console log as text for your convenience 🙂



    bson-ext seems to be the culprit



    The reason I added it is because I got this error:

    Module not found: Can't resolve 'bson-ext' in 'D:\code\test_projects\next-payload-gv\node_modules\.pnpm\mongodb@4.16.0\node_modules\mongodb\lib'

    Any idea why that is? It only happens when using

    pnpm


    maybe related deprecation warnings
    Edit:

    It only shows up when I have the

    bson-ext

    dependency



    Yup, it's definitely

    bson-ext

    , I re-added all the other dependencies and it works fine. Tried adding

    bson-ext

    again, and it fails.



    I attached the console log without

    bson-ext


    I get this error when adding

    bson-ext


    @jarrod_not_jared Do you have any suggestions as to what to do with the following warning?


    - warn ./node_modules/.pnpm/mongodb@4.16.0_aws-crt@1.18.0/node_modules/mongodb/lib/bson.js
    Module not found: Can't resolve 'bson-ext' in 'D:\code\test_projects\next-payload-gv\node_modules\.pnpm\mongodb@4.16.0_aws-crt@1.18.0\node_modules\mongodb\lib'


    Payload seems to be working fine without it, but not sure if it's something that's needed for some more hidden feature. It also takes up a lot of space in the console log, so it will be hard to see other errors.



    I attached the full console log as a file

  • discord user avatar
    jarrod_not_jared
    Payload Team
    3 weeks ago

    can you try adding this to your next config within the withPayload function:


    experimental: {
      outputFileTracingExcludes: {
        '**/*': [
          'node_modules/mongodb@4.16.0_aws-crt@1.18.0',
        ]
      }
    }
  • default discord avatar
    snailedlt
    3 weeks ago

    definitely



    with or without bson-ext as a dependency?

  • discord user avatar
    jarrod_not_jared
    Payload Team
    3 weeks ago

    probably without, is there a reason you added all of those deps?



    "snappy": "^7.2.2",
    "aws-crt": "^1.18.0",
    "aws4": "^1.12.0",
    "bson-ext": "^4.0.3",
    "kerberos": "^2.0.1",
    "lucide-react": "^0.268.0",
    "mongodb": "^5.7.0",
    "mongodb-client-encryption": "^2.9.0",
    "mongoose": "^7.4.3"
  • default discord avatar
    snailedlt
    3 weeks ago

    I added them because of warnings



    same type as with bson-ext



    It's because of the way pnpm handles peer dependencies differently than yarn and npm I think



    I get seemingly the same console log. Gonna try with

    outputFileTracingIgnores

    instead since I've had issues with

    outputFileTracingExcludes

    in the past.



    ref this thread:

    https://discord.com/channels/967097582721572934/1141325269383258152/1143245523944472677

    and this github issue:

    https://github.com/vercel/next.js/issues/54245#issuecomment-1686787942


    I tried this too:


        experimental: {
          outputFileTracingIgnores: [
            '**/node_modules/mongodb@4.16.0_aws-crt@1.18.0',
          ]
        },

    That didn't work either. Doesn't seem like it's ignored/excluded in any case.

  • discord user avatar
    jarrod_not_jared
    Payload Team
    3 weeks ago

    Hey! I used your github answer to fix a bug we were running into the other day without even realizing it was you, small world! But yeah, I accounted for it within the next-payload package here:

    https://github.com/payloadcms/next-payload/blob/main/withPayloadPlugin.js#L65-L66
  • default discord avatar
    snailedlt
    3 weeks ago

    oh neat! Glad I could be of help! 😄

  • discord user avatar
    jarrod_not_jared
    Payload Team
    3 weeks ago

    as for this pnpm issue, I really don't know without digging into it ☚ī¸

  • default discord avatar
    snailedlt
    3 weeks ago

    đŸ˜Ļ



    I think we're gonna switch over to the hosted version instead of the serverless nextjs version anyways, so it's not a big deal thankfully 🙂



    If you do find a solution, please do let me know though, but no need to focus on it for me 🙂



    Thank you very much for all the help, at the very least we did figure out sort of what caused the issue

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.