Recipe changes does not take an effect until I manually edit panda.config.ts / restart vite dev

[Newbie012]

Description

When I edited a recipe located in lib/recipes/button.recipe.ts, I expected the change to be reflected in the browser. However, it didn't.

I tried reproducing it in Stackblitz, but it seems to work there, so my guess it has something to do with WSL2.

❌ Didn't work:

• I have both pnpm dev and pnpm panda codegen --watch running at the same time.
• I added the location of the recipe to the config's include properly (Got "config changed, rebuilding...").
• I tried removing the styled-system folder and running pnpm panda codegen.
• I tried removing node_modules folder.

✅ Worked, but meh...

• Manually editing panda.config.ts after editing the recipe.
• Restarting Vite dev server.

Link to Reproduction

https://stackblitz.com/edit/github-lhhzk8-urjw7p?file=lib%2Frecipes%2Fbutton.recipe.ts,panda.config.ts

Steps to reproduce

While it works on Stackblitz, I'll reflect the steps I'm doing which it doesn't work

1. Make sure both pnpm dev and pnpm panda codegen --watch are running
2. Go to button.recipe.ts
3. Edit it
4. Expect to see the change reflected
5. Change in fact is reflected on Stackblitz, but locally I'm unable to see it.

JS Framework

React (TS)

Panda CSS Version

0.18.3

Browser

Google Chrom 119

Operating System

• macOS
• Windows
• Linux

Additional Information

Since I can't reproduce it on Stackblitz, I know that there's a big chance you won't be able to fix it. Thus, I'll be happy to cooperate on Discord or on any platform you see fit. I assume this issue will happen a lot. In fact, I think it happened on your live stream as well.

I'm using Vite 5 and I'm running on WSL 2.

Screenshare.-.2023-11-19.1_37_12.AM.mp4

[segunadebayo]

Hi @Newbie012,

You shouldn’t have to run panda codegen in watch mode. The postcss plugin will detect changes and re-emit the files as needed.

NB: The version we used on the livestream had some regressions that’s why it didn’t work.

[Newbie012]

Hi @segunadebayo, thanks for replying.

The new changes were not emitted even without running panda codegen

[olafurns7]

This is an similar issue as we are running into with recipes defined outside of the panda.config.ts and being imported similarly as here.

It actually works though in Next.js, but Storybook does not update similarly to the issue here.

[Newbie012]

I suggest keeping it back as an issue since it's a bug rather than a Q&A

[RemyMachado]

@segunadebayo do you know which version introduced this issue?

I'm curently using panda v0.22.1 with vite on Ubuntu Linux, the recipe is correctly getting updated in the node_modules, but the HMR doesn't trigger. However, the HMR works fine when editing JSX...

It seems that my recipes' HMR issue has been introduced with v0.20.x