Facing the issue now with Next.js 14:

[danesto]

Canvas not found 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!

Originally posted by @danesto in https://github.com/konvajs/react-konva/issues/588#issuecomment-1910421325

[myassir]

Using 'use client'; on the lazy loaded component solved the issue for me.

[danesto]

Already tried, it didn't work for me for some reason. Finally managed to build it locally by installing some packages that canvas package was requiring apparently in order to run, now am trying to figure out how to make it work on Vercel as well.

On Thu, 25 Jan 2024 at 22:54, Yassir Mounsif @.***> wrote:

Using 'use client'; on the lazy loaded component solved the issue for me.

— Reply to this email directly, view it on GitHub https://github.com/konvajs/react-konva/issues/787#issuecomment-1911060388, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANRJIO7I6AENODB7LCX5ORLYQLICRAVCNFSM6AAAAABCKWO2VGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMJRGA3DAMZYHA . You are receiving this because you authored the thread.Message ID: @.***>

[kev-bee]

I had the issue last year when I began my project on Next 13, but the guide here https://github.com/konvajs/react-konva#usage-with-nextjs fixed he issue.

Now I'm facing the same issue since the Next 14.1 update, but only on local (for now at least...). Already tried the lazy loading, 'use client' and webpack config update, but none of them worked 😕

@danesto how did you manage to build it locally?

Also, is there some investigation on the subject?

[lavrton]

Just tried with the last next 14, all works good for me with the approach described in the readme.

@kev-bee please make a little repository to reproduce.

[dev-fredericfox]

~~Not working on 14.1.3 (tested with static export).~~ ~~(With 'use client', dynamic import, and webpack config).~~

Edit: My mistake was thinking I could import elements from react-konva directly like this import { Circle } from "react-konva" however this is not the case. Same as with the cavas element explained in the guide, you need to create your own component and then dynamically import it wherever you want to use it.

import dynamic from "next/dynamic";
const Canvas = dynamic(() => import("../../../components/Canvas"), { ssr: false });
// Do not: import { Circle } from "react-konva"; this will also lead to the same bug.
const MyCircle = dynamic(() => import("../../../components/MyCircle"), { ssr: false });
export default function NestedCanvas() {
	return (
		<Canvas>
			<MyCircle x={200} y={100} radius={50} fill="red" />
		</Canvas>
	);
}

and then MyCircle can be something as simple as

import Konva from "konva";
import { Circle } from "react-konva";

type Props = Konva.CircleConfig;
export default function MyCircle({ ...props }: Props) {
	return <Circle {...props} />;
}

See my demo: https://github.com/dev-fredericfox/konva-nested-dynamic-import-nextjs/blob/main/app/nested/_components/NestedCanvas.tsx