Closed danesto closed 8 months ago
Using 'use client';
on the lazy loaded component solved the issue for me.
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: @.***>
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?
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.
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} />;
}
I've tried adding the following configuration in next.config.mjs
to resolve the canvas-related issue:
export default {
webpack: (config) => {
config.resolve.fallback = {
...config.resolve.fallback,
canvas: false,
};
return config;
},
};
The Konva components should render correctly without any errors or issues.
The application throws errors related to Konva nodes not being recognized and issues with rendering certain components. Specific error messages include:
Konva has no node with the type source. Group will be used instead.
Text components are not supported for now in ReactKonva.
Cannot read properties of undefined (reading 'getParent')
The above errors encountered in the application regarding Konva, Text, getParent issues can be addressed through research and tailored solutions as I have successfully implemented solutions that work effectively for my application
Next 14.2 on cloudflare pages crashes when trying to bundle konva. downgrading to 14.1 fixes solves this issue for me, need to take a closer look at this
Canvas not found issue now with Next.js 14:
version: "next": "14.0.4".
App wan't build with error:
Component that uses Konva is dynamically imported:
And the component is defined outside of the app directory.
NextConfig:
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