@types/ package not compatible with React 19 types #117
Description
I have an implementation of Signature Dialog:
'use client'
import { useState, useRef } from 'react'
import type SignatureCanvas from 'react-signature-canvas'
import SignaturePad from 'react-signature-canvas'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
// Add type for SignatureCanvas
type SignatureCanvasRef = SignatureCanvas | null
interface SignatureDialogProps {
onSign: (name: string, signature: string) => void
disabled?: boolean
}
export function SignatureDialog({ onSign, disabled = false }: SignatureDialogProps) {
const [name, setName] = useState('')
const [isOpen, setIsOpen] = useState(false)
// Update the ref type
const signatureRef = useRef<SignatureCanvasRef>(null)
const handleSign = () => {
if (name && signatureRef.current) {
const signatureDataUrl = signatureRef.current.getTrimmedCanvas().toDataURL("image/png");
if (signatureDataUrl) {
onSign(name, signatureDataUrl)
setIsOpen(false)
}
}
}
const clearSignature = () => {
if (signatureRef.current) {
signatureRef.current.clear()
}
}
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button disabled={disabled}>Sign Contract</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Sign Contract</DialogTitle>
<DialogDescription>
Please provide your full name and signature to complete the contract.
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="name" className="text-right">
Full Name
</Label>
<Input
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
className="col-span-3"
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label className="text-right">Signature</Label>
<div className="col-span-3 border rounded">
{/* Add type assertion to SignatureCanvas */}
<SignaturePad
ref={signatureRef}
canvasProps={{
width: 300,
height: 150,
className: 'signature-canvas'
}}
/>
</div>
</div>
</div>
<div className="flex justify-between">
<Button variant="outline" onClick={clearSignature}>
Clear Signature
</Button>
<Button onClick={handleSign} disabled={!name}>
Submit
</Button>
</div>
</DialogContent>
</Dialog>
)
}
It works in development, and VSCode doesn't complain during development.
But when I try to build my Nextjs app I get the type error:
> next build
▲ Next.js 14.2.23
- Environments: .env
Creating an optimized production build ...
warn - The class `duration-[${TRANSITION_DURATION}ms]` is ambiguous and matches multiple utilities.
warn - If this is content and not a class, replace it with `duration-[${TRANSITION_DURATION}ms]` to silence this warning.
✓ Compiled successfully
Linting and checking validity of types ...Failed to compile.
./src/components/farrago/onboarding/components/tabs/3_contract/signature-dialog.tsx:70:16
Type error: 'SignaturePad' cannot be used as a JSX component.
Its type 'typeof ReactSignatureCanvas' is not a valid JSX element type.
Types of construct signatures are incompatible.
Type 'new (props: ReactSignatureCanvasProps) => ReactSignatureCanvas' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
Property 'refs' is missing in type 'ReactSignatureCanvas' but required in type 'Component<any, any, any>'.
68 | <div className="col-span-3 border rounded">
69 | {/* Add type assertion to SignatureCanvas */}
> 70 | <SignaturePad
| ^
71 | ref={signatureRef}
72 | canvasProps={{
73 | width: 300,
Static worker exited with code: 1 and signal: null
Linting and checking validity of types . ELIFECYCLE Command failed with exit code 1.
I'm on the latest version of the package 1.0.7 and tried to pnpm install --save-dev @types/react-signature-canvas