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

snailedlt

3 weeks ago

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

jarrod_not_jared
Payload Team
3 weeks ago
@snailedlt anyway you can upload the whole video? That one looks like its 0 seconds
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
dashboard_-_Grnn_Vekst_-_Google_Chrome_2023-09-05_13-53-11.mp4
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?
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
message.txt
message.txt
message.txt

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',
    ]
  }
}

snailedlt
3 weeks ago
definitely

with or without bson-ext as a dependency?

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"

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.
message.txt
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
snailedlt
3 weeks ago
oh neat! Glad I could be of help! 😄
jarrod_not_jared
Payload Team
3 weeks ago
as for this pnpm issue, I really don't know without digging into it ☹️
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.