Typescript error in monorepo after upgrading park ui cli from 0.6.0 to 7.2.0

[MartinSchmidt123]

I setup a monorepo following
https://panda-css.com/docs/guides/component-library

This means there are separate packages

• packages/components/ - shared components,
  contains Park UI and custom components using Park UI

• packages/panda-preset/ - custom Panda Preset,
  see https://panda-css.com/docs/guides/component-library#ship-a-panda-preset

• packages/styled-system/ - Panda as external package,
  see https://panda-css.com/docs/guides/component-library#use-panda-as-external-package

• app/app1/ - example app
  using Park UI and custom components based on Park UI.

After updating park ui cli from 0.6.0 to 0.7.2 I receive the following errors for a large number of components (for simplicity I only added button and card for the reproduction example):

src/ui/primitives/card.tsx(16,49): error TS2559: Type 'Assign<HTMLStyledProps<"div">, PolymorphicProps>' has no properties in common with type '{ className?: string | undefined; }'.
src/ui/primitives/card.tsx(23,3): error TS2559: Type 'Assign<HTMLStyledProps<"div">, PolymorphicProps>' has no properties in common with type '{ className?: string | undefined; }'.
src/ui/primitives/card.tsx(26,51): error TS2559: Type 'Assign<HTMLStyledProps<"div">, PolymorphicProps>' has no properties in common with type '{ className?: string | undefined; }'.
src/ui/primitives/card.tsx(31,51): error TS2559: Type 'Assign<HTMLStyledProps<"div">, PolymorphicProps>' has no properties in common with type '{ className?: string | undefined; }'.

I setup a codesandbox repository showing 0.6.0 and 0.7.2:

• 0.6.0

  • Github https://github.com/MartinSchmidt123/park-ui-monorepo/tree/main
  • Codesandbox https://codesandbox.io/p/github/MartinSchmidt123/park-ui-monorepo/main

• 0.7.2

  • Github https://github.com/MartinSchmidt123/park-ui-monorepo/tree/park-ui-cli-7
  • Codesandbox https://codesandbox.io/p/github/MartinSchmidt123/park-ui-monorepo/park-ui-cli-7

A simple getting started / all in one park ui app works fine.

So it is probably something with my setup. But since it worked for 0.6.0 I hope that we might be able to find the changes that causes these errors and maybe even document them.

Thank you for all the great work on (P)Ark UI and Panda!

[cschroeter]

@MartinSchmidt123

Hey mate, cloned your project. Couldn't spot any issue. Maybe restart ts-server, reinstall deps.

[FranciscoKloganB]

@MartinSchmidt123 I'm trying to setup Park UI with Panda CSS on an Nx monorepo aswell. I'm finding your minimum reproductions useful, but I wonder if you could actually publish your configurations with an Nx monorepo instead of a regular PNPM one?

🙇

[MartinSchmidt123]

@cschroeter Thank you for taking a look! Unfortunately, you used the main branch which uses Park UI 0.6.0.
I should have probably made a clearer that the main branch was for showing that it worked with 0.6.0.
The problematic branch is park-ui-cli-7

git clone -b park-ui-cli-7 [email protected]:MartinSchmidt123/park-ui-monorepo.git
cd park-ui-monorepo/
pnpm i
pnpm -F @park-ui-monorepo/app run build

results in

> @park-ui-monorepo/[email protected] build /[..]/park-ui-monorepo/apps/app1
> tsc && vite build 

../../packages/components/src/ui/primitives/card.tsx:16:49 - error TS2559: Type 'Assign<HTMLStyledProps<"div">, PolymorphicProps>' has no properties in common with type '{ className?: string | undefined; }'.

16 export const Body = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, PolymorphicProps>>(
                                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../../packages/components/src/ui/primitives/card.tsx:23:3 - error TS2559: Type 'Assign<HTMLStyledProps<"div">, PolymorphicProps>' has no properties in common with type '{ className?: string | undefined; }'.

23   Assign<HTMLStyledProps<'div'>, PolymorphicProps>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../../packages/components/src/ui/primitives/card.tsx:26:51 - error TS2559: Type 'Assign<HTMLStyledProps<"div">, PolymorphicProps>' has no properties in common with type '{ className?: string | undefined; }'.

26 export const Footer = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, PolymorphicProps>>(
                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../../packages/components/src/ui/primitives/card.tsx:31:51 - error TS2559: Type 'Assign<HTMLStyledProps<"div">, PolymorphicProps>' has no properties in common with type '{ className?: string | undefined; }'.

31 export const Header = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, PolymorphicProps>>(
                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 4 errors in the same file, starting at: ../../packages/components/src/ui/primitives/card.tsx:16

/[..]/park-ui-monorepo/apps/app1:
ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL @park-ui-monorepo/[email protected] build: `tsc && vite build `
Exit status 2

I also see the same errors in the CodeSandbox

[MartinSchmidt123]

@MartinSchmidt123 I'm trying to setup Park UI with Panda CSS on an Nx monorepo aswell. I'm finding your minimum reproductions useful, but I wonder if you could actually publish your configurations with an Nx monorepo instead of a regular PNPM one?

🙇

@FranciscoKloganB Unfortunately, I never had the chance to use Nx und cannot help here.

[cschroeter]

@MartinSchmidt123

I've reproduced the error. It seems there's something odd with your code version, especially with this: x: number, x: string, x: symbol.

What it should be:

[MartinSchmidt123]

Short Update:

I could not find the source of the error.
It seems that importing HTMLStyledProps from the same project via

import type {  HTMLStyledProps } from 'styled-system/types'

works fine.
As soon as I try to setup a separate package for the styled-system folder and import it via

import type { HTMLStyledProps } from '@park-ui-monorepo/styled-system/types'

it breaks.

---

I looks like it might work better in bun. First tests seem promising.
I will focus on bun instead of solving this error for pnpm.

[Loque-]

Hmm I have a similar setup and am experiencing the same issue - I also see similar types to this #375

This only seems to happen with the styled-system generated in the monorepo, if I generate the styled-system, in the same package, just for this package, the types are fine.