Skip to content

🐛 [BUG] components with subpaths #134

@renardeinside

Description

@renardeinside

Category: bug

When installing animate-ui components via add_component, the generated import paths inside the components don't match the actual file locations on disk.

Steps to reproduce:

  1. Run add_component with @animate-ui/primitives-effects-fade
  2. The component is written to src/<app>/ui/components/animate-ui/primitives-effects-fade.tsx
  3. Its dependencies are written to:
    • src/<app>/ui/hooks/hooks-use-is-in-view.ts
    • src/<app>/ui/components/animate-ui/primitives-animate-slot.tsx

The problem:
The imports inside primitives-effects-fade.tsx reference paths that don't exist:

import { useIsInView, ... } from '@/hooks/use-is-in-view';
// actual file: @/hooks/hooks-use-is-in-view

import { Slot, ... } from '@/components/animate-ui/primitives/animate/slot';
// actual file: @/components/animate-ui/primitives-animate-slot

This causes tsc to fail with TS2307 (Cannot find module) immediately after installation.

Workaround: Manually fix the imports:

import { useIsInView, ... } from '@/hooks/hooks-use-is-in-view';
import { Slot, ... } from '@/components/animate-ui/primitives-animate-slot';

It looks like the registry's original nested path structure (e.g. hooks/use-is-in-view, primitives/animate/slot) gets flattened to hyphenated filenames during installation, but the import statements inside the components aren't updated to match.


Metadata (auto-collected)

  • apx version: 0.3.8
  • OS: macos
  • Arch: aarch64

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions