xstyled icon indicating copy to clipboard operation
xstyled copied to clipboard

Export `XStyled` interface to resolve build errors in pnpm monorepos

Open nerdyman opened this issue 3 years ago • 0 comments

Now this is a story all about how my life got flipped turned upside down, and I'd like to take a minute just sit right, there, I'll tell you how I fixed this nasty TypeScript error.

Summary

I have a pnpm monorepo set up using xstyled for its UI kit components, but it doesn't build and fails on the following error:

src/xstyled.config.ts(27,43): error TS4023: 
Exported variable 'styled' has or is using name 'XStyled' from external module "node_modules/.pnpm/@[email protected][email protected]/node_modules/@xstyled/styled-components/dist/index" 
but cannot be named.

After doing a bit of digging I found that XStyled is defined in the index.d.ts for @xstyled/emotion and @xstyled/styled-components, but it's not exported which breaks the UI kit build during the generation of d.ts files.

This PR adds XStyled (and BoxStyledTags) as an export for @xstyled/emotion and @xstyled/styled-components. There aren't any runtime code changes, it's just exporting already defined types.

Test plan

I've run through the build steps of the contrib guide and works as expected. I've also got an example repo using the builds from my fork and they work ok too.

https://github.com/nerdyman/xstyled-pnpm-monorepo-ts2742

Hopefully this is up to scratch 🙏

nerdyman avatar Jun 09 '22 14:06 nerdyman