Troubleshooting
Common build and packaging errors when shipping a Panda-based component library, and how to fix them.
Most of these come from the build tool bundling or externalizing the shared styled-system package differently
than your library expects. They show up at build or type-check time, not at runtime, which makes them easy to
mistake for a Panda bug when they're usually a bundler configuration mismatch.
Module resolution error for styled-system imports
ERROR: Could not resolve "../styled-system/xxx"
This usually means the file extension Panda generated doesn't match what your build tool expects to resolve. Set
outExtension in your panda.config.ts to match:
panda.config.ts
import { defineConfig } from '@pandacss/dev'
export default defineConfig({
//...
outExtension: 'js'
})Types like StyleContextProvider or a recipe's variant type aren't exported
If users hit a type error saying something your library re-exports from the shared styled-system package
isn't exported, for example a createSlotRecipeContext-generated provider type, or a recipe's variant type, check two
things before assuming it's a Panda issue:
- The
styled-systempackage's ownexportsmap. Every conditional export needstypeslisted first, beforeimportandrequire. Iftypesisn't first, some type checkers resolve the wrong (or no) declaration file for that subpath. See the exports map in Set up a library package for the expected shape. - Whether your build tool bundles or externalizes declaration files for that package. If your library's build
step tries to inline the shared package's types into your own
.d.tsoutput, and that package's declaration files aren't structured the way the bundler expects, some named types can silently drop from the bundled output even though the JS import works fine. If you hit this, try excluding the sharedstyled-systempackage from your declaration bundling step entirely and let users resolve its types the normal way, through their ownnode_modulesresolution, rather than through your library's inlined.d.ts.
A component's prop type resolves to undefined
This is usually the same root cause as above, a re-exported type not surviving declaration bundling, rather than
anything wrong with the component itself. Confirm the type resolves correctly when imported directly from the
styled-system package before assuming your component's own types are broken.
Yarn PnP
If you use Yarn PnP, set nodeLinker: node-modules in .yarnrc.yml. Panda's generated styled-system package
doesn't currently resolve correctly under PnP's strict linking.
Still stuck?
Component library setup issues are usually specific to your build tool and monorepo layout. Check GitHub Discussions (opens in a new tab) for similar setups, or ask in Discord (opens in a new tab).