konvajs / react-konva

React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
https://konvajs.github.io/docs/react/
MIT License
5.8k stars 260 forks source link

Facing the issue now with Next.js 14: #787

Closed danesto closed 8 months ago

danesto commented 10 months ago

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 commented 10 months ago

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

danesto commented 10 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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

GVAmaresh commented 2 months ago

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;
  },
};

and restart the server

Name: Konva compatibility issue with NextJS and TypeScript Issue: Module not found: './canvas' Solution: I am instructing Webpack to neglect the canvas module in the final bundle.

Expected Behavior

The Konva components should render correctly without any errors or issues.

Actual Behavior

The application throws errors related to Konva nodes not being recognized and issues with rendering certain components. Specific error messages include:

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

Environment

infix commented 1 month ago

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