Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeScript Error: Multiple components cannot be named in TypeScript. #27

Open
thebiltheory opened this issue Aug 16, 2024 · 2 comments
Open

TypeScript Error: Multiple components cannot be named in TypeScript. #27

thebiltheory opened this issue Aug 16, 2024 · 2 comments

Comments

@thebiltheory
Copy link

TypeScript Error: Exported variables from @rn-primitives components cannot be named

Environment

  • Package: @rn-primitives/* (affecting multiple components)
  • TypeScript Version: 5.5.3
  • React Native Version: 0.74.5
  • Build System: Turborepo
  • Usage Context: Design system with rn-reusables

Description

When trying to use components from various @rn-primitives/* packages, I'm encountering TypeScript errors (TS4023) across multiple components. The error suggests that the exported variables (like Avatar, and presumably others) are using names from external modules that cannot be named.

Error Message

Here's an example with the Avatar component, but this issue affects almost all components from @rn-primitives:

Exported variable 'Avatar' has or is using name 'AvatarRootProps' from external module "/Users/me/Development/node_modules/.pnpm/@rn-primitives [email protected][email protected]_@babel [email protected]_@babel [email protected]_@_kqsy77ymbpf3s4wleiubwixcge/node_modules/@rn-primitives/avatar/dist/avatar" but cannot be named.ts(4023)
⚠ Error (TS4023) |
Exported variable `Avatar` has or is using name `AvatarRootProps` from external module
"/Users/me/Development/node_modules/.pnpm/@rn-primitives [email protected][email protected]_@babel [email protected]_@babel [email protected]_@_kqsy77ymbpf3s4wleiubwixcge/node_modules/@rn-primitives/avatar/dist/avatar"
but cannot be named.
const Avatar: React.ForwardRefExoticComponent<Omit<ViewProps & { asChild?: boolean;

Steps to Reproduce

  1. Set up a React Native project using Turborepo
  2. Install various @rn-primitives/* packages
  3. Attempt to import and use components (e.g., Avatar, Button, etc.) in TypeScript files
  4. Observe TypeScript errors for most, if not all, components

Expected Behavior

Components from @rn-primitives/* packages should be importable and usable without TypeScript errors.

Actual Behavior

TypeScript throws TS4023 errors when trying to use most components from @rn-primitives/* packages.

Additional Context

  • This issue is occurring in a design system project that uses rn-reusables.
  • The error seems to be related to how TypeScript is interpreting the types exported from various @rn-primitives/* packages.
  • The problem is widespread, affecting almost all components from these packages, not just isolated to one or two.

Possible Solutions

Any insights into resolving this type conflict would be greatly appreciated. Some questions that might help:

  1. Are there any known issues with using @rn-primitives/* packages in a Turborepo setup?
  2. Are there any specific TypeScript configurations recommended for use with these packages?
  3. Is there a way to properly type these components to avoid these errors?
  4. Could this be related to how the types are being generated or exported from the @rn-primitives/* packages?
  5. Are there any known compatibility issues between the versions of TypeScript, React Native, and @rn-primitives/* that I'm using?

Thank you !
@thebiltheory
Copy link
Author

@roninoss have you encountered a similar issue?

@imWildCat
Copy link

I'm seeing similar errors running tsc

../../packages/app-ui/src/components/ui/IFSelect.tsx:42:3 - error TS2339: Property 'className' does not exist on type '{}'.

42   className,
     ~~~~~~~~~

../../packages/app-ui/src/components/ui/IFSelect.tsx:44:35 - error TS2344: Type '({ children }: { children?: ReactNode; className?: string; }) => ReactNode' does not satisfy the constraint 'ElementType<any, keyof IntrinsicElements>'.
  Type '({ children }: { children?: ReactNode; className?: string; }) => ReactNode' is not assignable to type 'FunctionComponent<any>'.
    Type 'ReactNode' is not assignable to type 'ReactElement<any, any>'.
      Type 'string' is not assignable to type 'ReactElement<any, any>'.

44 }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>) => {
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../../packages/app-ui/src/components/ui/IFSelect.tsx:49:6 - error TS2786: 'SelectPrimitive.ScrollUpButton' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.

49     <SelectPrimitive.ScrollUpButton
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../../packages/app-ui/src/components/ui/IFSelect.tsx:64:3 - error TS2339: Property 'className' does not exist on type '{}'.

64   className,
     ~~~~~~~~~

../../packages/app-ui/src/components/ui/IFSelect.tsx:66:35 - error TS2344: Type '({ children }: { children?: ReactNode; className?: string; }) => ReactNode' does not satisfy the constraint 'ElementType<any, keyof IntrinsicElements>'.
  Type '({ children }: { children?: ReactNode; className?: string; }) => ReactNode' is not assignable to type 'FunctionComponent<any>'.
    Type 'ReactNode' is not assignable to type 'ReactElement<any, any>'.

66 }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>) => {
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../../packages/app-ui/src/components/ui/IFSelect.tsx:71:6 - error TS2786: 'SelectPrimitive.ScrollDownButton' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.

71     <SelectPrimitive.ScrollDownButton
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../../packages/app-ui/src/components/ui/IFSelect.tsx:109:14 - error TS2786: 'SelectPrimitive.Viewport' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.

109             <SelectPrimitive.Viewport
                 ~~~~~~~~~~~~~~~~~~~~~~~~


Found 7 errors in the same file, starting at: ../../packages/app-ui/src/components/ui/IFSelect.tsx:42

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@imWildCat @thebiltheory