React Konva's `use-image` library throws TypeScript error

Question

The complete error is:

TS2322: Type '[HTMLImageElement | undefined, "loaded" | "loading" | "failed"]' is not assignable to type 'HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | undefined'. Type '[HTMLImageElement | undefined, "loaded" | "loading" | "failed"]' is not assignable to type 'OffscreenCanvas'.

I'm trying to use https://github.com/konvajs/use-image like:

const win = {
  width: window.innerWidth,
  height: window.innerHeight,
}

const App = () => {
  const image = useImage('https://konvajs.org/assets/lion.png')

  return (
    <Stage width={win.width} height={win.height}>
      <Layer>
        <Image image={image} />
      </Layer>
    </Stage>
  )
}

I tried making a declaration.d.ts file like:

declare module 'use-image' {
  function useImage(
    url: string,
    crossOrigin?: string
  ): [
    (
      | HTMLImageElement
      | SVGImageElement
      | HTMLVideoElement
      | HTMLCanvasElement
      | ImageBitmap
      | OffscreenCanvas
      | undefined
    ),
    'loaded' | 'loading' | 'failed'
  ]

  export default useImage
}

but it doesn't work either. How do I solve this issue?

score 2 · Answer 1 · answered Dec 20 '20 at 08:57

2

You're not using the correct syntax should be const [image] not const image

answered Dec 20 '20 at 08:57

Josh Stevens

3,943
1
15
22

Haha I already posted the answer just a minute before you but still thanks :) – deadcoder0904 Dec 20 '20 at 08:58
Yes i just seen loool! glad you sorted – Josh Stevens Dec 20 '20 at 08:58

score 1 · Accepted Answer · answered Dec 20 '20 at 08:56

1

This was a stupid mistake on my part. It should've been [image] instead of image:

const [image] = useImage('https://konvajs.org/assets/lion.png')

answered Dec 20 '20 at 08:56

deadcoder0904

7,232
12
66
163

1

@JoshStevens definitely not myself. someone answered on [Reddit](https://www.reddit.com/r/typescript/comments/kgpda5/ts2322_type_htmlimageelement_undefined_loaded/) haha – deadcoder0904 Dec 20 '20 at 09:00

React Konva's `use-image` library throws TypeScript error

2 Answers2