Facing the issue now with Next.js 14: about react-konva HOT 5 CLOSED

from react-konva.

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

from react-konva.

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

from react-konva.

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?

from react-konva.

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.

from react-konva.