Collapsible : 3 Errors in Console

[murnifine]

https://github.com/shadcn/ui/assets/133650344/2f4e18e5-3d36-43d3-a9a8-1045863ea5f7

i used the first example and got an Error message. but with the second example there is no Error

Error

"use client"

import * as React from "react"
import { ChevronsUpDown, Plus, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export function CollapsibleDemo() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Collapsible
      open={isOpen}
      onOpenChange={setIsOpen}
      className="w-[350px] space-y-2"
    >
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="text-sm font-semibold">
          @peduarte starred 3 repositories
        </h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm" className="w-9 p-0">
            <ChevronsUpDown className="h-4 w-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-3 font-mono text-sm">
        @radix-ui/primitives
      </div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-3 font-mono text-sm">
          @radix-ui/colors
        </div>
        <div className="rounded-md border px-4 py-3 font-mono text-sm">
          @stitches/react
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}
### 

No Error

"use client"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export function CollapsibleDemo() {

  return (
    <Collapsible>
      <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
      <CollapsibleContent>
        Yes. Free to use for personal and commercial projects. No attribution
        required.
      </CollapsibleContent>
    </Collapsible>
  );
}

[phil-schmidtke]

I appreciate your effort in testing the provided code. However, I encountered difficulty reproducing the reported error based on the information provided.

One possible explanation for the issue could be that the code in question is missing the "default" export statement. To address this, please modify the code by marking it as a default export. For example, you can update it to export default function ....

If applying the suggested modification does not resolve the error for you, I recommend checking your dependencies for any outdated or incompatible versions. To ensure compatibility, please refer to the provided package.json file, as it represents a configuration where the code is functioning correctly.

{
  "name": "shadcn-tests",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-collapsible": "^1.0.2",
    "@radix-ui/react-slot": "^1.0.1",
    "@types/node": "20.2.1",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "autoprefixer": "10.4.14",
    "class-variance-authority": "^0.6.0",
    "clsx": "^1.2.1",
    "eslint": "8.40.0",
    "eslint-config-next": "13.4.3",
    "lucide-react": "^0.220.0",
    "next": "13.4.3",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwind-merge": "^1.12.0",
    "tailwindcss": "3.3.2",
    "tailwindcss-animate": "^1.0.5",
    "typescript": "5.0.4"
  }
}

[murnifine]

I thought it looks like the problem is solved, I just tried again after 3 days.

but I'm still confused why the error can appear