@types/ package not compatible with React 19 types

[pat-mw]

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

[agilgur5]

upstream in the @types/ package

I'm on the latest version of the package 1.0.7 and tried to pnpm install --save-dev @types/react-signature-canvas

So I don't maintain the @types/ package -- you'll want to file an issue with DefinitelyTyped.

Property 'refs' is missing in type 'ReactSignatureCanvas' but required in type 'Component<any, any, any>'.

This error appears to be due to a React 19 types incompatibility, equivalent to DefinitelyTyped/DefinitelyTyped#71404. EDIT: Also equivalent: DefinitelyTyped/DefinitelyTyped#71859, DefinitelyTyped/DefinitelyTyped#71858, DefinitelyTyped/DefinitelyTyped#71657

Per DefinitelyTyped/DefinitelyTyped#71404 (comment), it looks like you can workaround this by using/pinning @types/react v18.

You didn't list your React versions, but I'm guessing you're on v19?

@types/react-signature-canvas hasn't had a typings update in a couple months (since DefinitelyTyped/DefinitelyTyped#70637), so I'm guessing it needs a small change to be compatible with React 19 types.

in this repo

I've been meaning to release a v1.1.0 for a while now based off the main branch, which is written natively in TS (since #42). That should also resolve any typings issues.

I did have to make some small typings changes during the React 19 upgrade here as well: #116. Although those don't seem related to this error 🤔

[agilgur5]

I've been meaning to release a v1.1.0 for a while now based off the main branch, which is written natively in TS (since #42). That should also resolve any typings issues.

v1.1.0-alpha.1 has been released as the first official native TS release.

That might solve these issues for you, or the workaround linked above may still be required if there are any conflicting @types/react versions

[pat-mw]

Awesome! thank you for addressing this so quickly. Will give it a go this weekend.

I managed to get around it by just explicitly not using types and disabling eslint on my file containing the signature canvas, but I'm a big fan of TS wherever possible 🎉🔥

[agilgur5]

This error appears to be due to a React 19 types incompatibility

Just to update here, afaict, this seems to be due to a mismatch between react vs @types/react versions. I wrote a bit more in DefinitelyTyped/DefinitelyTyped#71404 (reply in thread)

Per DefinitelyTyped/DefinitelyTyped#71404 (comment), it looks like you can workaround this by using/pinning @types/react v18.

Pinning your @types/react version to match your react version is a correct workaround for now.