Error when importing react-konva in nextjs

[OdifYltsaeb]

So my error message is this

Error: require() of ES Module /app/node_modules/konva/lib/Core.js from /app/node_modules/react-konva/lib/ReactKonvaCore.js not supported. Instead change the require of Core.js in /app/node_modules/react-konva/lib/ReactKonvaCore.js to a dynamic import() which is available in all CommonJS modules.

Not quite the same as with #588 and the fixes suggested there (dynamic loading of components with ssr disabled) Seem to do nothing for me.

I did this for my app component:

import React from 'react';
import dynamic from 'next/dynamic';

import { wrapper } from '../stores';

import '../styles/globals.css';
import MainLayout from '../components/layouts/mainLayout';
import AuthLayout from '../components/layouts/authLayout';

const layouts = {
    default: MainLayout,
    auth: AuthLayout,
};

// eslint-disable-next-line react/prop-types
const PortalApp = function ({ Component, pageProps }) {
    // eslint-disable-next-line react/prop-types
    const { layout } = Component;

    switch (layout) {
        case 'auth':
            return React.createElement(layouts.auth, null, <Component {...pageProps} />);
        default:
            return React.createElement(layouts.default, null, <Component {...pageProps} />);
    }
};

export default dynamic(() => Promise.resolve(wrapper.withRedux(PortalApp)), {
    ssr: false,
});

But I still get the error. Not sure what do to here or how to fix this.

[lavrton]

Are you certain that using dynamic in the same module works? I was thinking you must use it in a parent module (as in the suggested solution in linked issue).

[OdifYltsaeb]

No, I'm not sure about anything here. I also tried it in parent module but it did not help either.

[matvance]

Same problem here 👍. I tried to import it dynamically either inside and outside the stage component.

Current code causing problems:

Definition:

import React from 'react';
import { Stage } from 'react-konva';

const TeamTrendsBarChart = () => {
  return <Stage width={200} height={100} />;
};

export default TeamTrendsBarChart;

Usage:

const TeamTrendsBarChart = dynamic(
  () => import('../../Team/components/TeamTrendsBarChart'),
  { ssr: false }
);

export const Page = () => {
  return <TeamTrendsBarChart />;
}

[lavrton]

I need a minimal repository to reproduce.

[jmcoder1]

Same issue here

[jmcoder1]

Same problem here 👍. I tried to import it dynamically either inside and outside the stage component.

Current code causing problems:

Definition:

import React from 'react';
import { Stage } from 'react-konva';

const TeamTrendsBarChart = () => {
  return <Stage width={200} height={100} />;
};

export default TeamTrendsBarChart;

Usage:

const TeamTrendsBarChart = dynamic(
  () => import('../../Team/components/TeamTrendsBarChart'),
  { ssr: false }
);

export const Page = () => {
  return <TeamTrendsBarChart />;
}

I did this instead:

export const Stage = dynamic(() => import("./Stage").then((mod) => mod.Stage), {
  ssr: false,
});

[hyze2d]

Hello, i am tried solutions from the previous comments and it kinda worked but now i am getting

TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

Call Stack ensureRootIsScheduled node_modules/react-reconciler/cjs/react-reconciler.development.js (17721:0) scheduleUpdateOnFiber node_modules/react-reconciler/cjs/react-reconciler.development.js (17572:0) Object.updateContainer node_modules/react-reconciler/cjs/react-reconciler.development.js (20950:0) eval node_modules/react-konva/es/ReactKonvaCore.js (47:0) commitHookEffectListMount node_modules/react-dom/cjs/react-dom.development.js (20573:0) commitLifeCycles node_modules/react-dom/cjs/react-dom.development.js (20634:0) commitLayoutEffects node_modules/react-dom/cjs/react-dom.development.js (23426:0) HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js (3945:0) Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js (3994:0) invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js (4056:0) commitRootImpl node_modules/react-dom/cjs/react-dom.development.js (23151:0) unstable_runWithPriority node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js (468:0) runWithPriority$1 node_modules/react-dom/cjs/react-dom.development.js (11276:0) commitRoot node_modules/react-dom/cjs/react-dom.development.js (22990:0) performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js (22329:0) eval node_modules/react-dom/cjs/react-dom.development.js (11327:0) unstable_runWithPriority node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js (468:0) runWithPriority$1 node_modules/react-dom/cjs/react-dom.development.js (11276:0) flushSyncCallbackQueueImpl node_modules/react-dom/cjs/react-dom.development.js (11322:0) flushSyncCallbackQueue node_modules/react-dom/cjs/react-dom.development.js (11309:0) scheduleUpdateOnFiber node_modules/react-dom/cjs/react-dom.development.js (21893:0) dispatchAction node_modules/react-dom/cjs/react-dom.development.js (16139:0) checkForUpdates node_modules/use-subscription/cjs/use-subscription.development.js (85:0) eval node_modules/next/dist/shared/lib/loadable.js (183:44) Set.forEach

LoadableSubscription._update node_modules/next/dist/shared/lib/loadable.js (183:24) eval node_modules/next/dist/shared/lib/loadable.js (164:17) Any way to resolve this?

[lavrton]

@ein1x3x make sure react, react-dom and react-konva versions are matched. 17.x or 18.x

[lavrton]

The issue should be resolved with konva@8.3.6.

[jbc-deve]

The issue should be resolved with konva@8.3.6.

After upgrade, still got this error

[lavrton]

Looks like you are using unmatched react and react-konva version. Make sure they have the same major version. Both 17 or both 18.

[ayazhussain1]

@OdifYltsaeb did you find a solution for this?

[OdifYltsaeb]

@ayazhussain1 yes. My solution was to use pure canvas without any package. Have not tested react-konva again.

[ayazhussain1]

@lavrton can you please provide a solution for this? I have tried everything you mentioned above but still no luck.

[lavrton]

@ayazhussain1 what exact issue do you have?

[ayazhussain1]

Hi, @lavrton I solved the above issue, but can you help me in one of my use cases? I want to fill the Rect but there should be some space between two pixels (Pixel Pitch).

[Sounav201]

@lavrton I tried using the fix as suggested in #588 but I'm facing the following error ReactKonva.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead rename ReactKonva.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" My code is as follows In the parent component, ie the page const NoSSRComponent = dynamic(() => import("../components/UploadCanvas"), { ssr: false, });

In the UploadCanvas component, importing modules from react-konva `import { Stage, Layer, Image, Transformer } from 'react-konva'; import Konva from 'konva';

` I cannot wrap my head around this. Please let me know if you have a solution

[lavrton]

@Sounav201 Can you dive in into node_modules/react-konva and node_modules/konva change change file names or package.json to see how it can be resolved?

[Sounav201]

@lavrton If I change ReactKonva.js to ReactKonva.cjs and change the type in package.json from module to commonjs and then import the following dynamically, const Stage = dynamic(() => import('react-konva').then(mod => mod.Stage), { ssr: false }); const Layer = dynamic(() => import('react-konva').then(mod => mod.Layer), { ssr: false }); const Image = dynamic(() => import('react-konva').then(mod => mod.Image), { ssr: false }); and so on, I receive the following error. error - ./node_modules/react-konva/es/ReactKonva.js Module build failed: Error: ENOENT: no such file or directory, I am new to this so please excuse me if I have misunderstood the fix

[michael-harley]

Looks like you are using unmatched react and react-konva version. Make sure they have the same major version. Both 17 or both 18.

I tried using this package.json

{
  "name": "my-next-konva",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "18.15.11",
    "@types/react": "18.0.35",
    "@types/react-dom": "18.0.11",
    "eslint": "8.38.0",
    "eslint-config-next": "13.3.0",
    "konva": "^8.4.3",
    "next": "13.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-konva": "^18.2.5",
    "typescript": "5.0.4"
  }
}

Still getting this error.

Server Error
Error: Cannot find module 'canvas'

[thrive-charlie]

I was having the same issue as @michael-harley, my example worked perfectly in CodeSandbox as a react app. As soon as I put it into NextJS I was getting several errors. Initially I had SSR issues, examples of which to fix that have already been shown in this thread.

It's worth noting that I am using NextJS 13.4.2 with React 18.2.0 and react-konva 18.2.9. I am also using the NextJS app directory as well.

The first main error was:

Error: Cannot find module 'canvas'

Running npm install --save canvas introduced a new problem:

Error: Cannot find module 'relative "../build/Release/canvas.node"'

I have just come across this Reddit post which had the fix for me.

The Fix: When adding the canvas module to your project, add it manually to your package.json with the following URL:

"canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz"

[lavrton]

I recently added this note: https://github.com/konvajs/react-konva#usage-with-nextjs I hope it will be useful. If it doesn't work, or you have new information, please let me know.

[GuigaBytes]

I went through this problem today, it took me a while to catch up because looking at the proposed solutions I noticed that I already used them in my Next project from the beginning, such as the dynamic import of the component. My application was with the build ok until certain commit, what I noticed was that I had inserted an export to a function within MyCanvas, moving it from there solved for me.