How to configure Vite to include additional folders

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.