Can I use next-payload and pages directory (pages router) or not?

default discord avatar
martafiixek
2 months ago
35

Hi, I currently have a project using pages router and not an app router. Is it still possible to use

next-payload

or not? Of course, when you run

next-payload

, it creates an

app

folder.

  • default discord avatar
    derosul
    2 months ago

    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 🙂

  • default discord avatar
    martafiixek
    2 months ago

    Oh ok, I found the exact same issue

  • default discord avatar
    derosul
    2 months ago

    haha, my tailwind css made Payload look pretty weird on dark mode and weird stuff like that.

  • default discord avatar
    martafiixek
    2 months ago

    And do you have any experience running it on Vercel?

  • default discord avatar
    derosul
    2 months ago

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


    Update 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'
        ],
  • default discord avatar
    paulpopus
    2 months ago

    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 😂

  • default discord avatar
    notchr
    2 months ago

    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

  • default discord avatar
    paulpopus
    2 months ago

    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 🤷

  • default discord avatar
    martafiixek
    2 months ago

    What is the deal with this issue though?


    https://github.com/payloadcms/next-payload/issues/24

    As 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

    npm

    too, seems like package-lock was somehow "corrupted"



    Nevermind, found the main issue



    Installing

    mongodb

    in the core project fucks up Payload

    mongo

    (actually

    mongoose

    ig) dependecies and its dependencies

  • default discord avatar
    notchr
    2 months ago

    @martafiixek Ah so the issue was the difference between mongodb and mongoose libraries?

  • default discord avatar
    martafiixek
    2 months ago

    From my point of view, it happened, when I had MongoDB installed as a direct dependency in my project. Didn't matter whether using

    npm

    or

    yarn

    . The solution is to either:


    - Don't install MongoDB as a direct dependency of your project, instead you can import

    mongo

    from

    node_modules

    , as Payload installed

    mongoose

    which installs

    mongo

    , so

    mongo

    is 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 / yarn

    resolves

  • default discord avatar
    notchr
    2 months ago

    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

  • default discord avatar
    martafiixek
    2 months ago

    No, someone before me installed

    mongo

    to the project as a direct dependency, I'm trying to refactor it and migrate to Payload



    Then I installed

    payload

    and

    next-payload
  • default discord avatar
    notchr
    2 months ago

    Ahhhhh okay that makes more sense then

  • default discord avatar
    martafiixek
    2 months ago

    I need to now rewrite some functions that used

    mongo

    directly

  • default discord avatar
    notchr
    2 months ago

    I'm surprised there are direct mongo calls being made tbh

  • default discord avatar
    martafiixek
    2 months ago

    I mean it is a crappy code, so haha

  • default discord avatar
    notchr
    2 months ago

    Ahhh

  • default discord avatar
    martafiixek
    2 months ago

    Variables are named

    aaa


    any

    everywhere

  • default discord avatar
    notchr
    2 months ago

    I'm not sure using direct mongo calls will be good



    I understand your position



    But it could definitely break things

  • default discord avatar
    martafiixek
    2 months ago

    Well, that's why I'm rewriting it 😄

  • default discord avatar
    notchr
    2 months ago

    😄

  • default discord avatar
    martafiixek
    2 months ago

    No, it still didn't break anything

  • default discord avatar
    notchr
    2 months ago

    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

  • default discord avatar
    martafiixek
    2 months ago

    No, its actually fine



    Just the database part will be a bit of a hassle



    1,5 million documents, 26 GB

  • default discord avatar
    notchr
    2 months ago

    Yikes, well, you're testing with a sample of that data set right?



    like 100 docs

  • default discord avatar
    martafiixek
    2 months ago

    Exactly 100, are you a mind reader?

  • default discord avatar
    notchr
    2 months ago

    shh



    No one is supposed to know



    looks around cautiously
  • default discord avatar
    martafiixek
    2 months ago
    :HACKERMANS:
  • default discord avatar
    notchr
    2 months ago

    hehe



    Let us know if you run into any other issues!



    Good luck 😄

  • default discord avatar
    martafiixek
    2 months ago

    Thanks!



    This is starting to become really annoying. It happens when installing anything that

    mongoose

    uses, now it happens with

    bson

    package

    :sad:


    And I have really no idea why

  • default discord avatar
    notchr
    2 months ago

    @martafiixek what's the error that occurs?

  • default discord avatar
    martafiixek
    2 months ago
  • default discord avatar
    notchr
    2 months ago

    Hmm



    And this stemmed from not having a fresh repo right?

  • default discord avatar
    martafiixek
    2 months ago

    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

    )

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.