Can I use next-payload and pages directory (pages router) or not?
Hi, I currently have a project using pages router and not an app router. Is it still possible to use
next-payloador not? Of course, when you run
next-payload, it creates an
appfolder.
Yes! you can use both at the same time!
I tried to move the Payload admin to the pages component as well, but I quickly changed my mind when I found out that my styles etc are getting included in my _app.tsx, this interfered with Payload styles. So wouldn't recommend that 😓
But the Payload admin route can live in perfect harmony with your current Pages setup 🙂
Oh ok, I found the exact same issue
haha, my tailwind css made Payload look pretty weird on dark mode and weird stuff like that.
And do you have any experience running it on Vercel?
Yes and No, previously I managed to get it running with ease on Vercel.
However, I picked up next-payload a couple of days ago for a side project, but i get an scss error when trying to build the application
https://github.com/payloadcms/next-payload/issues/38Update on that one, managed to fix that issue, it was involved when using a plugin that introduces a custom component. If you're encountering the same problem add this to your next-config.js
transpilePackages: [ 'your-payload-plugin-package' ],
I'm also running a App router and Pages hybrid, wasnt painless at the start but its usable now, though who knows what happens in week with this platform 😂
I see a lot of next-related issues, why is this?
Every other post I see, not just on Payload discord is some issue with Next breaking etc
App router + react server components in one big breaking change update brings a lot of issues as its expected...a ton of libs dont work the same, there's no way to tell what works and what doesnt except to try it out if the maintainter doesnt explicitly say anything
quite a few changes in paradigm as well so it's just more confusing for everyone as well as poor documentation on how the advanced components/config in next should/can behave
maybe with hindsight we'll see this as growing pains or maybe a red flag going forward 🤷
What is the deal with this issue though?
https://github.com/payloadcms/next-payload/issues/24As I'm getting the same behavior with npm
Of course on a new created Next app, it works fine
Not in my current project though
Yarn works fine though
Nevermind, it works with
npmtoo, seems like package-lock was somehow "corrupted"
Nevermind, found the main issue
Installing
mongodbin the core project fucks up Payload
mongo(actually
mongooseig) dependecies and its dependencies
@martafiixek Ah so the issue was the difference between mongodb and mongoose libraries?
From my point of view, it happened, when I had MongoDB installed as a direct dependency in my project. Didn't matter whether using
npmor
yarn. The solution is to either:
- Don't install MongoDB as a direct dependency of your project, instead you can import
mongofrom
node_modules, as Payload installed
mongoosewhich installs
mongo, so
mongois still present inside
node_modules- Don't use MongoDB. Instead I got rid of Mongo as a direct dependency and query database with Payload Local API
- Fix it using some type of
npm / yarnresolves
Interesting, I'm doing my best to follow, but I think I get the idea. Was Payload the one installing mongodb as a direct dependency?
Maybe @paulpopus can provide some insight here
No, someone before me installed
mongoto the project as a direct dependency, I'm trying to refactor it and migrate to Payload
Then I installed
payloadand
next-payloadAhhhhh okay that makes more sense then
I need to now rewrite some functions that used
mongodirectly
I'm surprised there are direct mongo calls being made tbh
I mean it is a crappy code, so haha
Ahhh
Variables are named
aaaanyeverywhere
I'm not sure using direct mongo calls will be good
I understand your position
But it could definitely break things
Well, that's why I'm rewriting it 😄
😄
No, it still didn't break anything
Haha okay that's good then
Well, at least now it didn't
In any case, it's good you're cleaning it up
Hopefuly it's not too crazy of a rewrite
No, its actually fine
Just the database part will be a bit of a hassle
1,5 million documents, 26 GB
Yikes, well, you're testing with a sample of that data set right?
like 100 docs
Exactly 100, are you a mind reader?
shh
No one is supposed to know
looks around cautiously
hehe
Let us know if you run into any other issues!
Good luck 😄
Thanks!
This is starting to become really annoying. It happens when installing anything that
mongooseuses, now it happens with
bsonpackage
And I have really no idea why
@martafiixek what's the error that occurs?
@notchr Same as
https://github.com/payloadcms/next-payload/issues/24Hmm
And this stemmed from not having a fresh repo right?
It happens even with a clean repo and just installing MongoDB
So I fixed it
There are two ways:
- Install MongoDB and lock it to one version that Mongoose (required by Payload) uses (for example I had to specify "mongodb": "4.8.1")
- Additionally install packages that are really needed and ignore the ones you dont need with some Webpack config (
https://github.com/Automattic/mongoose/issues/13212#issuecomment-1518012851)
Continue the discussion in Discord
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.