CODEWITHSUNDEEP
reactjstypescriptshadcnui
IvonaK
IvonaK

Reputation: 278

TypeScript Error with shadcn/ui Button Component in React 19

TypeScript Error with shadcn/ui Button Component in React 19

Problem

I'm getting a TypeScript error after generating a Button component using pnpm dlx shadcn@canary add button. The error occurs with the latest React 19 despite using the canary version of shadcn-ui.

Error Message

'Comp' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>> | ElementType<any, keyof IntrinsicElements>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>' is not assignable to type 'ElementType'.
      Type 'ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
        Type 'import("/Users/jakubkluzniak/dev/portofolio_manager/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
          Type 'bigint' is not assignable to type 'ReactNode'.

Generated Code

This is the code generated by shadcn-ui using:

pnpm dlx shadcn@canary add button

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

// [Rest of the button code...]

Environment

package.json

{
  "dependencies": {
    "@radix-ui/react-slot": "^1.1.2",
    "@tailwindcss/vite": "^4.0.4",
    "@tauri-apps/api": "^2",
    "@tauri-apps/plugin-shell": "^2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.475.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.0.1",
    "tailwindcss": "^4.0.4",
    "tailwindcss-animate": "^1.0.7"
  }
}

TypeScript Configuration

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import path from "path";

const host = process.env.TAURI_DEV_HOST;

export default defineConfig(async () => ({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  clearScreen: false,
  server: {
    port: 1420,
    strictPort: true,
    host: host || false,
    hmr: host
      ? {
          protocol: "ws",
          host,
          port: 1421,
        }
      : undefined,
    watch: {
      ignored: ["**/src-tauri/**"],
    },
  },
}));

Question

How can I fix the TypeScript error that occurs when using the shadcn/ui Button component with React 19? The component was generated using pnpm dlx shadcn@canary add button, but seems to have compatibility issues with React 19's type system.

What I've Tried

  1. Using the canary version of shadcn-ui which should have React 19 support
  2. Checking if it's a dependency version mismatch issue
  3. Verifying TypeScript configuration

The error seems specific to React 19's type system interaction with the Radix UI Slot component that shadcn/ui uses internally.

Upvotes: 1

Views: 114

Answers (1)

IvonaK
IvonaK

Reputation: 278

OK i added

 "overrides": {
      "react": "^19.0.0",
      "react-dom": "^19.0.0"
    }

to package.json and seems to be working but not sure if it right soultion

Upvotes: 1

Related Questions