react-konva: Error when importing react-konva in nextjs

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.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 4
Comments: 23 (8 by maintainers)

Most upvoted comments

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

lavrton on Apr 24, 2022

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

matvance on Mar 17, 2022

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

OdifYltsaeb on May 11, 2022

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).

ayazhussain1 on May 12, 2022

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.

lavrton on Jun 9, 2023