search

cschroeter / park-ui

Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.
https://park-ui.com
MIT License
1.75k stars 75 forks source link

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

Closed MartinSchmidt123 closed 4 months ago

MartinSchmidt123 commented 4 months ago

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

This means there are separate packages

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:

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 commented 4 months ago

@MartinSchmidt123

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

image
FranciscoKloganB commented 4 months ago

@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?

:bow:

MartinSchmidt123 commented 4 months ago

@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 git@github.com:MartinSchmidt123/park-ui-monorepo.git
cd park-ui-monorepo/
pnpm i
pnpm -F @park-ui-monorepo/app run build

results in 

> @park-ui-monorepo/app@0.0.0 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/app@0.0.0 build: `tsc && vite build `
Exit status 2

I also see the same errors in the CodeSandbox

image

MartinSchmidt123 commented 4 months ago

@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 commented 4 months ago

@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.

image

What it should be:

image
MartinSchmidt123 commented 4 months ago

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- commented 1 month ago

Hmm I have a similar setup and am experiencing the same issue - I also see similar types to this https://github.com/cschroeter/park-ui/issues/375

Screenshot 2024-10-02 at 22 20 09

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.