Command missing @radix-ui\react-focus-scope

[bfourgeaud]

Hello,

When I try to use the Command component it throws an error : Error: Failed to read source code from [...]\node_modules\@radix-ui\react-dialog\node_modules\@radix-ui\react-focus-scope\dist\index.mjs

In fact in /node_modules the @radix-ui\react-focus-scope package doesn't exist

I installed the Command component like this npx shadcn-ui@latest add command

I am using NextJs v14.1

my package.json

"dependencies": {
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "cmdk": "^0.2.1",
    "lucide-react": "^0.321.0",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18",
}

$ node -v v20.11.0

Code throwing the error :

<Command>
    <CommandInput placeholder="Type a command or search..." />
        <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Suggestions">
              <CommandItem>Calendar</CommandItem>
              <CommandItem>Search Emoji</CommandItem>
              <CommandItem>Calculator</CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Settings">
              <CommandItem>Profile</CommandItem>
              <CommandItem>Billing</CommandItem>
              <CommandItem>Settings</CommandItem>
        </CommandGroup>
    </CommandList>
</Command>

To make it work I have to comment out the CommandDialog function fromcomponents/ui/command.tsx

//import { type DialogProps } from "@radix-ui/react-dialog"

/* interface CommandDialogProps extends DialogProps {}

const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
} */

[7hourspg]

use this command

npm install cmdk

Remember shadcn-ui is based on radix-ui so some time you should read the error carefully.because you have to download some radix packages

[bfourgeaud]

@7hourspg cmdk@0.2.1 is installed if you look at my package.json ...

[7hourspg]

can you install this package

npm i @radix-ui/react-focus-scope

i'm telling you to install this because This is an internal utility for radix-ui. let me know if issue still persists

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.