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.

[lavrton]

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

[komarnisky]

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