When setting up Panda CSS in my RedwoodJS project, I ran into an issue - although autocomplete worked fine in my editor, the dev server couldn’t find the generated Panda files, so the styles weren’t applied.
The Fix
After some searching, I found the solution in a StackOverflow thread - adding a resolve alias to my Vite config:
const viteConfig: UserConfig = {
plugins: [redwood()],
resolve: {
alias: [
{
find: 'styled-system',
replacement: resolve(__dirname, 'styled-system'),
},
],
},
};This tells Vite where to find the styled-system folder generated by Panda at the root level.
Why It’s Needed
By default, Vite’s entry point in a RedwoodJS project is web/src, so it doesn’t know about the root web folder. The resolve alias maps styled-system imports to the correct location, fixing the issue.
This ended up being a quick fix once I knew to search for resolve aliases. Hopefully this article helps other Vite users trying to include a specific folder in their bundle.