Error when importing in Next.js

I installed konva and react-konva to my next.js project. When I try to import anything from the react-konva package, I get this error

Error: Must use import to load ES Module: C:\Users\bucsa\dev\atomic\node_modules\konva\lib\Core.js
require() of ES modules is not supported.
require() of C:\Users\bucsa\dev\atomic\node_modules\konva\lib\Core.js from C:\Users\bucsa\dev\atomic\node_modules\react-konva\lib\ReactKonvaCore.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename Core.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\bucsa\dev\atomic\node_modules\konva\package.json.

It’s not the first library to produce this error but I wasn’t importing components from there, only functions which I found a janky way to work around by dynamically importing them in the useEffect hook and passing their value to a state variable. I tried the same here but I did not work. I also tried next.js’ dynamic component importing, that didn’t work either.

[mateusfbsoares]

Hi @Laci556 , could you please elaborate the way to import react-konva with the ssr:false, and provide an example code here?

@nenjamin2405 The way I got it working was by creating a page that loads a component without ssr. Documentation about it: https://nextjs.org/docs/advanced-features/dynamic-import

how I did:

Page that only loads the component I want:

import dynamic from "next/dynamic";

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

export default function TestsPage(props) {
  return <NoSSRComponent />;
}

Component that the page above imports:

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

function Tests(props) {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Circle x={200} y={100} radius={50} fill="green" />
      </Layer>
    </Stage>
  );
}

export default Tests;

[davincios]

Does not work for me: I am getting: Instead rename ReactKonva.js to end in .cjs, change the requiring code to use import(), or remove “type”: “module” from /Users/vincent/code/forge-codebase/forge-webclient/node_modules/react-konva/package.json.