Building with esbuild

default discord avatar
yorrd
10 months ago
5

Appreciate the work on payload. Because we use a stack on which we build all customer projects (100+), we need to integrate and can't start from scratch. There are two topics which I'd love input on:



- esbuild seems to have an issue with scss / postcss loading, I get hundreds of

Error: PostCSS received undefined instead of CSS string

errors when accessing the admin page. Working on figuring out why, have you seen this behavior already?


- I'm not keen on webpack, we use esbuild internally for way faster compile times. I've seen

https://github.com/payloadcms/payload/discussions/738

, you seem to be open to switching to esbuild in the mid-term?


- it would be great to have a pre-compiled admin bundle since most projects in our case won't touch the admin panel and just need to serve it from /admin. You do already have the payload/dist/admin/*, but sass still needs to be compiled down unfortunately, which is a bummer because otherwise we don't use sass



Building with esbuild



just checked, compiling your

create-payload-app

with esbuild (replace ts-node with tsc in nodemon.json) results in

TypeError: Cannot assign to read only property '.mjs' of object '[object Object]'

. So I'm not sure it's realistic for me to achieve esbuild support by myself?



... also, is it easier for y'all if I post here or on github discussions? wasn't sure where to go



just tried compiling the admin index.js directly with esbuild and disable webpack in the admin config section. That would also solve my problem. However, as expected there are several edge cases where esbuild differs from webpack. Because I'm aware that you're thinking of moving anyways, should I wait for you to switch to something apart from webpack? Happy to help in the transition btw, if you end up deciding to go the esbuild route. I'd really love to have payload CMS running in our system...

  • discord user avatar
    dribbens
    Payload Team
    10 months ago

    We have a planning meeting tomorrow, I'm going to bring this up and see where it falls in the roadmap.


    I know you have seen the GH discussions, but leaving this link here for others to see, somebody has reported doing this:

    https://github.com/payloadcms/payload/discussions/738
  • default discord avatar
    yorrd
    10 months ago

    @dribbens appreciate the feedback. as far as I can see that refers to putting esbuild on top of webpack to increase speed. Therefore, only .ts files would be sped up and the issue from above about postcss not getting the CSS string would remain. If after the planning meeting you'll say that it's a priority to exchange webpack with esbuild, I'd rather wait for that. If you're saying you'll stick with webpack, I'll have a shot at writing a custom esbuild config which covers the admin area. Lmk! 🙂

  • discord user avatar
    dribbens
    Payload Team
    10 months ago

    Gotcha, yeah. We're talking about ditching webpack for an alternative, but it is too early to say how realistic that is at this point.

  • default discord avatar
    yorrd
    10 months ago

    update: working around this by doing

    payload build

    and then serving the output directory with a express static middleware into our existing applications. Seems to work OK, but rebuild times are abysmal. Trying the esbuild "hack" from 738 tomorrow to speed up webpack

  • default discord avatar
    theo_m.
    2 months ago

    hey I'm interested in doing the same, but can you bypass the webpack build step when building your own express server ?

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.