M
MastraAI•15h ago
Amos

konva issue with mastra

I'm using konva in one of my workflows, and it has stopped working now. not sure when since mastra has been broken in dev for ages for me, but it was definitely working at some point to reproduce you can do the following 
import { Mastra } from "@mastra/core/mastra";
import "dotenv/config";
import { myAgent } from "@acme/worker-core/agent";
import { myWorkflow } from "@acme/worker-core/workflow";
import Konva from "konva";
import { storage } from "./storage.js";
import "konva/canvas-backend";

const text = new Konva.Text({
  fontFamily: "Arial",
  fontSize: 124,
  text: "Some text",
  width: 300,
});

const textHeight = text.height();

console.log("Text height:", textHeight);

export const mastra = new Mastra({
  agents: {
    myAgent,
  },
  bundler: {
    externals: ["execa"],
  },
  storage,
  workflows: {
    myWorkflow,
  },
});
import { Mastra } from "@mastra/core/mastra";
import "dotenv/config";
import { myAgent } from "@acme/worker-core/agent";
import { myWorkflow } from "@acme/worker-core/workflow";
import Konva from "konva";
import { storage } from "./storage.js";
import "konva/canvas-backend";

const text = new Konva.Text({
  fontFamily: "Arial",
  fontSize: 124,
  text: "Some text",
  width: 300,
});

const textHeight = text.height();

console.log("Text height:", textHeight);

export const mastra = new Mastra({
  agents: {
    myAgent,
  },
  bundler: {
    externals: ["execa"],
  },
  storage,
  workflows: {
    myWorkflow,
  },
});
results in an error https://github.com/amosbastian/mastra-reproduction/tree/konva
GitHub
GitHub - amosbastian/mastra-reproduction at konva
Contribute to amosbastian/mastra-reproduction development by creating an account on GitHub.
1 Reply
Amos
AmosOP•15h ago
> @acme/worker@ dev /Users/amosbastian/Development/mastra-build/apps/worker
> mastra dev

◐ Preparing development environment...
✓ Initial bundle complete
◇ Starting Mastra dev server...
file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/Util.js:18
        throw new Error(NODE_ERROR);
              ^

Error: Konva.js unsupported environment.

Looks like you are trying to use Konva.js in Node.js environment. because "document" object is undefined.

To use Konva.js in Node.js environment, you need to use the "canvas-backend" or "skia-backend" module.

bash: npm install canvas
js: import "konva/canvas-backend";

or

bash: npm install skia-canvas
js: import "konva/skia-backend";

    at ensureBrowser (file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/Util.js:18:15)
    at Object.createCanvasElement (file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/Util.js:384:9)
    at getDummyContext (file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/shapes/Text.js:67:25)
    at Text._setTextData (file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/shapes/Text.js:306:9)
    at new Text (file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/shapes/Text.js:94:14)
    at file:///Users/amosbastian/Development/mastra-build/apps/worker/.mastra/output/index.mjs:49:16
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
> @acme/worker@ dev /Users/amosbastian/Development/mastra-build/apps/worker
> mastra dev

◐ Preparing development environment...
✓ Initial bundle complete
◇ Starting Mastra dev server...
file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/Util.js:18
        throw new Error(NODE_ERROR);
              ^

Error: Konva.js unsupported environment.

Looks like you are trying to use Konva.js in Node.js environment. because "document" object is undefined.

To use Konva.js in Node.js environment, you need to use the "canvas-backend" or "skia-backend" module.

bash: npm install canvas
js: import "konva/canvas-backend";

or

bash: npm install skia-canvas
js: import "konva/skia-backend";

    at ensureBrowser (file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/Util.js:18:15)
    at Object.createCanvasElement (file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/Util.js:384:9)
    at getDummyContext (file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/shapes/Text.js:67:25)
    at Text._setTextData (file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/shapes/Text.js:306:9)
    at new Text (file:///Users/amosbastian/Development/mastra-build/node_modules/.pnpm/konva@10.0.0/node_modules/konva/lib/shapes/Text.js:94:14)
    at file:///Users/amosbastian/Development/mastra-build/apps/worker/.mastra/output/index.mjs:49:16
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
if you just run 
import Konva from "konva";
import "konva/canvas-backend";

const text = new Konva.Text({
  fontFamily: "Arial",
  fontSize: 124,
  text: "Some text",
  width: 300,
});

const textHeight = text.height();

console.log("Text height:", textHeight);
import Konva from "konva";
import "konva/canvas-backend";

const text = new Konva.Text({
  fontFamily: "Arial",
  fontSize: 124,
  text: "Some text",
  width: 300,
});

const textHeight = text.height();

console.log("Text height:", textHeight);
with tsx or bun for example then it works if I import like so then it does work, but no idea why 
await import("konva/canvas-backend");
const { default: Konva } = await import("konva");
await import("konva/canvas-backend");
const { default: Konva } = await import("konva");
also tried adding konva etc. to the bundler externals but that doesnt work

Did you find this page helpful?