hoangbv15 hoangbv15 - 5 months ago 9
Node.js Question

How to use konva on windows without Visual studio and GTK

It seems like VS and GTK are only needed to build node-canvas, which is required by konva.

Forgive me since I'm a complete newbie, but is there any other way of doing this without having to download and install a bunch of huge things that I'll never use for anything else? The whole process seems silly to me, since most browsers natively support HTML5 canvas these days.

Answer

I found the answer, it's very simple that I missed it for a whole week!

Just do a npm install konva react-konva --save-dev, without installing node-canvas.

Before I imported konva at the start of my component file like this

import {Layer, Rect, Stage, Group} from 'react-konva';

But this is loaded before the DOM was created, so webpack couldn't resolve 'canvas', which resulted in a

Could not resolve module 'canvas'

Exception.

I made it work by moving this down to either componentDidMount or render method:

render() {
    const {Layer, Rect, Stage, Group} = require('react-konva');
    return (
      <div ref="containerDOM">
        <Stage width={700} height={700}>
          <Layer>
            <Rect
              width="50"
              height="50"
              fill="green"
            />
          </Layer>
        </Stage>
      </div>
   );
}