Next.js Discord

Discord Forum

Panda CSS in production

Unanswered
Southern rough shrimp posted this in #help-forum
Open in Discord
Southern rough shrimpOP
Hey! Anyone else has or had trouble sending panda css to production? In my case postcss doesn’t generate code and styles are not applied.
As per their docs (https://panda-css.com/docs/installation/nextjs), after every dependency installation the prepare script should be executed and code generated. This indeed happens in dev and preview (vercel) environments but it doesn't in production builds unless there are changes to the dependency tree (pnp lock). This is because of how build cache works as far as I understand. However triggering a redeploy which is supposed to clear cache is not helping either.
For dev they suggest doing this rm -rf .next && next dev. Is this something that can also be done for the build script? And other that increasing build times, is there anything else one should be worried about?

2 Replies

Rafael Almeida
maybe you could also run the codegen always before the build on vercel? e.g. 
// package.json
{
  "scripts": {
    "vercel-build": "panda codegen && next build"
  }
}

then you can change the command in the dashboard to run this one instead of build. I think this would be better than deleting the cache folder, but if you really need to delete it then I don't think it would break anything besides some optimizations to build times as you already mentioned
Southern rough shrimpOP
So adding just panda codegen before the build command didn't work but deleting the whole .next folder, did. Of course it's not ideal and I still need to understand why this is needed but for now I can move forward.
On the other hand it looks like I didn't need to change anything in the project's settings. Apparently vercel uses whatever it reads in the package.json script.