react-konva warning 'Konva' is not defined

Question

I'm trying to learn how to use the canvas in react via a package called react-konva. npm installation was simple enough, and I added some demo code that works...

// in MainComponent.js
import {Stage, Layer, Rect} from 'react-konva';

// in render()
<Stage width={700} height={70}>
  <Layer  fill={'red'}>
    <Rect ... and so on

My code mentions Konva in the context of getting a color...

Konva.Util.getRandomColor()

but my browser warns appropriately: "warning 'Konva' is not defined". I tried this...

import {Konva, Stage, ... } from 'react-konva';

but that makes things worse, generating undefined errors wherever I try to use Konva.. I tried adding a reference directly to konva...

// in index.js
<script src="https://cdn.rawgit.com/konvajs/konva/1.3.0/konva.js"></script>

but then I get this error:

Konva instance is already exist in current eviroment. Please use only one instance.

(grammar error and misspellings in the original error message)

Would appreciate a pointer, or any thoughts about what might be causing this.

Nope. And that fixes it. Thanks so much! I misread the one liner npm install instruction on the github page. Feel free to add an answer that I can mark correct — user1272965, Jul 11 '17 at 15:39

score 2 · Answer 1 · answered May 14 '20 at 18:51

2

Try to use const Konva= window.Konva

this will allow you use vanilla KonvaJS properties.

answered May 14 '20 at 18:51

Harish Mahamure

153
12

score 1 · Accepted Answer · answered Jul 12 '17 at 02:33

1

As per the comment in your question. You have forgotten to do npm install konva.

answered Jul 12 '17 at 02:33

Mμ.

8,382
3
26
36

react-konva warning 'Konva' is not defined

2 Answers2