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

TypeError: ReactSharedInternals is undefined when using react-konva with Next.js 15 and React 18 #817

Closed saskiaclassic closed 2 weeks ago

saskiaclassic commented 2 weeks ago

Hello guys, I want to try out with react-kova but I get this issue.

I created a new project with the following dependencies:

"dependencies": { "konva": "^9.3.16", "next": "15.0.3", "react": "18.2", "react-dom": "18.2", "react-konva": "^18.2.10" }

Setup:

Framework: Next.js 15
React Version: 18.2
react-konva: 18.2.10

Project Structure and Components:

I'm using react-konva to render a simple Canvas component that displays a circle.

Code page.tsx:

"use client";

import dynamic from "next/dynamic";

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

export default function Home() {
  return (
    <div>
      <h1>Canvas</h1>
      <Canvas />
    </div>
  );
}

Code Canvas.tsx (in component-folder):

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

const Canvas: React.FC = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Circle
          x={200}
          y={200}
          radius={50}
          fill="blue"
          stroke="black"
          strokeWidth={4}
        />
      </Layer>
    </Stage>
  );
};

export default Canvas;

Problem:

When running the project, the following error appears in the browser:

Unhandled Runtime Error
TypeError: ReactSharedInternals is undefined

...

[project]/src/components/Canvas.tsx [app-client] (ecmascript, async loader)/</<
file:.../test-app/.next/static/chunks/src_components_Canvas_tsx_b331e5._.js (15:16)

Troubleshooting Attempts:

Question:

Has anyone encountered similar issues with react-konva and Next.js 15 or React 18, or is there a known fix for this error?

lavrton commented 2 weeks ago

Try it with react-konva@19.0.0-1

saskiaclassic commented 2 weeks ago

Thanks, it works now.