fix: (Astro) Resolve verbatimModuleSyntax TypeScript Error when using sidebar.tsx

[Luzefiru]

Closes: #5669

The Problem

TypeScript enables verbatimModuleSyntax by default which results in TypeScript throwing the following error in default Astro projects:

• [ERROR] [vite] The requested module 'class-variance-authority' does not provide an export named 'VariantProps'

Solution

Simply add the type keyword to resolve the error.

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
+ import { type VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"

Reproducing the Error

npm create astro@latest repro
cd ./repro

# then follow the shadcn Astro installation tutorial here: https://ui.shadcn.com/docs/installation/astro

npx shadcn@latest add sidebar

// src/components/custom/sidebar-layout.tsx
import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
} from '@/components/ui/sidebar';

function AppSidebar() {
  return (
    <Sidebar>
      <SidebarHeader />
      <SidebarContent>
        <SidebarGroup />
        <SidebarGroup />
      </SidebarContent>
      <SidebarFooter />
    </Sidebar>
  );
}

export function SidebarLayout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger />
        {children}
      </main>
    </SidebarProvider>
  );
}

// src/pages/index.astro
---
import '@/styles/globals.css';
import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.astro';
import { SidebarLayout } from '@/components/custom/sidebar-layout';

// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
---

<Layout>
  <SidebarLayout client:load>
    <Welcome />
  </SidebarLayout>
</Layout>

Logs

npm run dev -- --verbose

19:51:58 [ERROR] [vite] The requested module 'class-variance-authority' does not provide an export named 'VariantProps'
  Location:
    [PROJECT_DIR]/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52053:15
  Stack trace:
    at analyzeImportedModDifference (file:///[PROJECT_DIR]/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52053:15)
    at async ssrImport (file:///[PROJECT_DIR]/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52914:16)
    at async instantiateModule (file:///[PROJECT_DIR]/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5)
  vite:time 1654.24ms / +2s
  vite:resolve 0.43ms /@vite/client -> [PROJECT_DIR]/node_modules/vite/dist/client/client.mjs +136ms
  vite:load 1.21ms [fs] /@vite/client +100ms
  vite:resolve 0.19ms @vite/env -> [PROJECT_DIR]/node_modules/vite/dist/client/env.mjs +11ms
  vite:import-analysis 3.47ms [1 imports rewritten] node_modules/vite/dist/client/client.mjs +112ms
  vite:transform 13.06ms /@vite/client +113ms
  vite:time 19.13ms /@vite/client +33ms
  vite:load 7.26ms [fs] /node_modules/vite/dist/client/env.mjs +20ms
  vite:import-analysis 0.05ms [no imports] node_modules/vite/dist/client/env.mjs +8ms
  vite:transform 1.33ms /node_modules/vite/dist/client/env.mjs +8ms
  vite:cache [memory] /@vite/client +158ms
  vite:time 0.73ms /@vite/client +9ms
  vite:cache [304] /node_modules/vite/dist/client/env.mjs +0ms
  vite:time 0.43ms /node_modules/vite/dist/client/env.mjs +4ms

[vercel]

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

A member of the Team first needs to authorize it.