Typescript Error in Slide Over Dialog

[normanyu]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/overlays/slide-overs
• Component name: Wide create project form example

Describe the bug When trying to use the className property for Dialog, I get a Typescript error: Type 'string' is not assignable to type 'never'.ts(2322)

See Screenshot

To Reproduce Just copy and paste the component into a project.

Expected behavior I'd expect no typescript errors. Using className here is consistent with the example in the Headless Documentation.

Screenshots

Additional context package.json, tsconfig.js and tailwind.config.js here for reference.

  "name": "reporting",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "prisma generate"
  },
  "dependencies": {
    "@clerk/clerk-react": "^4.23.1",
    "@clerk/nextjs": "^4.22.1",
    "@heroicons/react": "^2.0.18",
    "@hookform/resolvers": "^3.1.1",
    "@prisma/client": "5.0.0",
    "@radix-ui/react-avatar": "^1.0.3",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.6",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-select": "^1.2.2",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.4",
    "@radix-ui/react-tooltip": "^1.0.6",
    "@tanstack/react-table": "8.7.0",
    "@types/node": "20.4.0",
    "@types/react": "18.2.14",
    "@types/react-dom": "18.2.6",
    "autoprefixer": "10.4.14",
    "class-variance-authority": "^0.6.1",
    "clsx": "^1.2.1",
    "cmdk": "^0.2.0",
    "date-fns": "^2.30.0",
    "encoding": "^0.1.13",
    "eslint": "8.44.0",
    "eslint-config-next": "13.4.8",
    "eslint-plugin-tailwindcss": "^3.13.0",
    "instantsearch.js": "^4.56.6",
    "lodash": "^4.17.21",
    "lucide-react": "^0.258.0",
    "next": "13.4.10",
    "numeral": "^2.0.6",
    "openai": "^3.3.0",
    "papaparse": "^5.4.1",
    "postcss": "8.4.24",
    "prisma": "^5.0.0",
    "react": "18.2.0",
    "react-day-picker": "^8.8.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.2",
    "react-instantsearch-hooks-web": "^6.47.0",
    "recharts": "^2.7.2",
    "svix": "^1.7.0",
    "tailwind-merge": "^1.13.2",
    "tailwindcss": "3.3.2",
    "tailwindcss-animate": "^1.0.6",
    "typescript": "5.1.6",
    "typesense": "^1.5.4",
    "typesense-instantsearch-adapter": "^2.7.0",
    "usehooks-ts": "^2.9.1",
    "zod": "^3.21.4",
    "zustand": "^4.3.9"
  },
  "devDependencies": {
    "@supabase/supabase-js": "^2.31.0",
    "@tailwindcss/forms": "^0.5.4",
    "@types/lodash": "^4.14.196",
    "@types/papaparse": "^5.3.7",
    "@typescript-eslint/eslint-plugin": "^6.1.0",
    "@typescript-eslint/parser": "^6.1.0",
    "csv-parser": "^3.0.0",
    "dotenv": "^16.3.1"
  }
}

  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate"), require("@tailwindcss/forms")],
};

[RobinMalfait]

Hey!

Can you share a minimal reproduction repo that we can clone down instead? That way we know that all the files are the same, that we have the same packages (lock file) and so on.

One thing I notice is that in your package.json you don't have the @headlessui/react package installed.

Just starting from your files, it does seem to work for me out of the box:

Once a minimal repo is ready, I'm more than happy to take a look!

[normanyu]

@RobinMalfait

Installing @headlessui/react 1.7.16 fixed this issue. Somehow it was still runningimport { Dialog, Transition } from "@headlessui/react"; even without the package installed.

[RobinMalfait]

Oh beautiful, glad you figured it out! 💪