How to configure Vite to include additional folders

When setting up Panda CSS in a RedwoodJS project, I ran into a small 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 solution

The solution is quite simple, if you know that the keyword to search for is resolve!

I ended up finding it in this StackOverflow answer. Note that the accepted answer is out of date and only adds unnecessary steps.

All you need to do is add the following highlighted lines to your Vite config.

const viteConfig: UserConfig = {
  plugins: [redwood()],
  resolve: {
    alias: [
      {
        find: 'styled-system',
        replacement: resolve(__dirname, 'styled-system'),
      },
    ],
  },
};

This tells Vite to find imports starting with styled-system, in the same folder as Vite’s config.

Explanation

By default, Vite’s entry point in a RedwoodJS project is in web/src, so the bundler has no awareness of what’s at the root level (web). The resolve alias maps styled-system imports to the correct location, fixing the issue.