Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Has anyone integrated Next, Turborepo, and Payload?

default discord avatar
samtietjen2 years ago
3

I saw the Remix boilerplate. Decided to try and build something similar with Next. I've had some issues.



1. Clone

https://github.com/vercel/turbo/tree/main/examples/basic

2. Run npx create-payload-app in the apps folder to create a new cms folder w/ Payload


3. Add the ui and tsconfig workspace dependencies to Payload's package.json


4. For simplicities sake, I won't create a server, I just switch the port to 8000 on Payload


5. Run pnpm build and all goes well. Same case for pnpm run dev.


6. To test that I can access the packages within payload I open up payload.config.ts and import { Button } from 'ui'.


7. I create a simple function that returns that button, ex: export const b = () => Button;


8. I get the error "Cannot use import statement outside a module"



Basically if I try to import anything from the UI package within this new Payload folder it treats it as if esmodules aren't configured. I've messed around with Payload's tsconfig.json and package.json - but run into the same sorts of errors over and over. Any insight to this? I'm sure it's something dumb.

  • default discord avatar
    dotellie2 years ago

    Hey, I'm running almost this exact setup! I'm using npm instead of pnpm but if I had to guess pnpm is going to handle things better anyway 😅



    In regards to your issue however... I think you're running into a recent change described in the 1.6.1 changelog:

    https://github.com/payloadcms/payload/releases/tag/v1.6.1

    In a nutshell, you need to set up transpilation

    somewhere

    . I ended up not being able to get it to work in my UI library so I just set it up for Payload as described by the PR mentioned in the changelog.

  • default discord avatar
    samtietjen2 years ago
    @321229198234615808

    Thank you! This is definitely whats going on. But darn. Even changing what was mentioned in the changelog doesn't resolve it. Still isn't transpiling the button found in the basic turborepo demo.



    Hmmmm...though even downgrading Payload to 1.5.0 doesn't seem to resolve it



    Ahhhh, dumb mistake on my part. Needed to use tsup to transpile the UI folder. So I guess Payload will import from "ui/dist"

  • default discord avatar
    dotellie2 years ago

    Sorry for the late reply... didn't actually get a ping from you which is strange. Though I'm also new to these threads in Discord so idk 🤷‍♀️ But hey, I'm glad you solved it! Most tools ignore dependencies when transpiling by default but it seems you figured that one out yourself 😅

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.