Hi @Laci556 , could you please elaborate the way to import react-konva with the ssr:false, and provide an example code here?

@nenjamin2405 The way I got it working was by creating a page that loads a component without ssr. Documentation about it: https://nextjs.org/docs/advanced-features/dynamic-import

how I did:

Page that only loads the component I want:

import dynamic from "next/dynamic";

const NoSSRComponent = dynamic(() => import("./Tests"), {
  ssr: false,
});

export default function TestsPage(props) {
  return <NoSSRComponent />;
}

Component that the page above imports:

import { Stage, Layer, Circle } from "react-konva";

function Tests(props) {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Circle x={200} y={100} radius={50} fill="green" />
      </Layer>
    </Stage>
  );
}

export default Tests;

Temporary workaround, as of next.js 13.5

Step 1: Update next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.externals = [...config.externals, { canvas: "canvas" }];  // required to make Konva & react-konva work
    return config;
  },
};

module.exports = nextConfig

Step 2: Use the components as usual

// components/Canvas/Canvas.tsx
import Konva from "konva";
import { Rect } from "react-konva";

Step 3: Dynamically export for no SSR

// components/Canvas/index.tsx
import dynamic from 'next/dynamic';

const CanvasWrapper = dynamic(() => import('./Canvas'), {
	ssr: false,
});

export default CanvasWrapper;

Does not work for me: I am getting: Instead rename ReactKonva.js to end in .cjs, change the requiring code to use import(), or remove “type”: “module” from /Users/vincent/code/forge-codebase/forge-webclient/node_modules/react-konva/package.json.

Hi @Laci556 , could you please elaborate the way to import react-konva with the ssr:false, and provide an example code here?

Not working for me with next 13.5.5

getting this error when i use konva-react with next.js 13.4

./node_modules/konva/lib/index-node.js:4:0 Module not found: Can’t resolve ‘canvas’ Did you mean ‘./canvas’? Requests that should resolve in the current directory need to start with ‘./’. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, D:\projects\editor\client). If changing the source code is not an option there is also a resolve options called ‘preferRelative’ which tries to resolve these kind of requests in the current directory too

Facing this issue now with Next.js 14:

version: “next”: “14.0.4”.

App wan’t build with error:

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error 
Error: Cannot find module 'canvas' 

Component that uses Konva is dynamically imported:

const Canvas = dynamic(() => import("@/components/canvas/canvas"), {
  ssr: false,
});

And the component is defined outside of the app directory.

NextConfig:

const nextConfig = {
  webpack: (config) => {
    config.externals = [...config.externals, { canvas: "canvas" }]; // required to make Konva & react-konva work
    return config;
  },
.....

Anyone maybe knows the workaround? I can’t get it to deploy on Vercel cause of the error. Thanks in advance!

Worked just fine for me. For both dev and prod builds. Can it be Node.js version? I am on v20.8.0. But I am not sure it may effect this.

@kkan0615 from what version? Did you try this https://github.com/konvajs/react-konva#usage-with-nextjs ?

It was fine at 13.4, but I got this error again after I update to 13.5.1. I am not sure it’s just next.js bug, so I am just waiting next version.

@kkan0615 from what version? Did you try this https://github.com/konvajs/react-konva#usage-with-nextjs ?

I get this error after I update next.js to 13.5.1 version.

Will you see that error if you manually add "type": "module", inside ./node_modules/react-konva/package.json?