TypeScript Error: Multiple components cannot be named in TypeScript.

[thebiltheory]

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/@[email protected][email protected]_@[email protected]_@[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/@[email protected][email protected]_@[email protected]_@[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]

@roninoss have you encountered a similar issue?

[imWildCat]

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

[mrzachnugent]

Fixed in latest versions