Better example code / tutorial?

[ismailuddin]

I'm unable to get a simple example running with any of the example code on the website in a React Codesandbox. Is there any fully working example that can be provided?

import "./styles.css";
import React from "react";
import { Command } from "cmdk";

export default function App() {
  const loading = true;
  const setOpen = () => {};
  const open = true;

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Command.Dialog open={open} onOpenChange={setOpen}>
        <Command.Input />

        <Command.List>
          {loading && <Command.Loading>Hang on…</Command.Loading>}

          <Command.Empty>No results found.</Command.Empty>

          <Command.Group heading="Fruits">
            <Command.Item>Apple</Command.Item>
            <Command.Item>Orange</Command.Item>
            <Command.Separator />
            <Command.Item>Pear</Command.Item>
            <Command.Item>Blueberry</Command.Item>
          </Command.Group>

          <Command.Item>Fish</Command.Item>
        </Command.List>
      </Command.Dialog>
    </div>
  );
}

https://codesandbox.io/s/wizardly-currying-x68myq

[tanmayairbase]

I faced the same, tried using previous versions and 0.1.16 works. Something got introduced in 0.1.17 it seems. You can do same till the error is fixed I guess

[pacocoursey]

That's weird, seems to be an issue with CRA specifically? Next.js works fine. Maybe something with esm/cjs.

[ismailuddin]

In NextJS I have issues with conflicts with the minimum React version needed 18/17 between cmdk and radix UI, as well as hydration issues loading the page... 😕

[yusufbz]

I'm facing the same issue now :/

[pomdtr]

I fixed the issue by overriding one of the dependencies in the package.json:

  "overrides": {
    "@radix-ui/react-dialog": "1.0.0"
  }