Modularize lucide-react imports

[ap-1]

Closes #267

[vercel[bot]]

@ap-1 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	❌ Failed (Inspect)			May 29, 2023 4:33pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
next-template	⬜️ Ignored (Inspect)	Visit Preview		May 29, 2023 4:33pm

[shadcn]

@ap-1 This is failing with the following error:

./app/examples/forms/account/account-form.tsx
Module not found: Can't resolve 'lucide-react/dist/esm/icons/calendar-icon'

[ap-1]

./app/examples/forms/account/account-form.tsx
Module not found: Can't resolve 'lucide-react/dist/esm/icons/calendar-icon'

The issue seems to occur when an alias for the icon is used instead of the original file. For example:

/* apps/www/components/mobile-nav.tsx */

import { SidebarOpen } from "lucide-react" // errors
import { PanelLeftOpen as SidebarOpen } from "lucide-react" // works fine

/* node_modules/lucide-react/dist/lucide-react.d.ts */

// PanelLeftOpen aliases
export declare const PanelLeftOpenIcon: LucideIcon;
export declare const LucidePanelLeftOpen: LucideIcon;
export declare const SidebarOpen: LucideIcon;

I'm not quite sure how to work around this in modularizeImports, so here's what we could do:

1. Hold off on this until we figure out how to make modularizeImports work with aliases
2. Create an eslint rule that enforces the use of the original lucide-react icon names instead of their aliases
   • I'm not sure if this is a good idea. It sounds pretty instrusive.

[shadcn]

@ap-1 Thanks for the fix. This is now supported out of the box in Next.js. See https://github.com/vercel/next.js/pull/53051

(Closing this as completed. Feel free to reopen if not).