'ESM packages (konva) need to be imported. Use 'import' to reference the package instead

I get the following error when importing Html from react-konva-utils. I have tried importing this using a dynamic import and just by standard import. For instance:

export const Html = dynamic(
  () => import("react-konva-utils").then((mod) => mod.Html),
  {
    ssr: false,
  }
);

import {Html} from "react-konva-utils"

I still keep getting the following error.

error - ./node_modules/react-konva-utils/node_modules/react-konva/lib/ReactKonva.js:24:0
Module not found: ESM packages (konva) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals        

Import trace for requested module:
./node_modules/react-konva-utils/es/html.js
./node_modules/react-konva-utils/es/index.js
./src/components/canvas/elements/index.tsx
./src/pages/video/edit/[uuid].tsx

https://nextjs.org/docs/messages/module-not-found

My code:

Text.tsx

import { Html } from "../index";
...

export const Text: React.FC<TextProps> = ({
  ...
}) => {
  const [isTextEditing, setIsTextEditing] = useState(false);

  if (isTextEditing)
    return (
      <Html groupProps={{ x, y }} divProps={{ style: { opacity: 1 } }}>
        <textarea
          value={label}
          style={InputStyle({ width: 400, height: 200, fontSize, fontFamily })}
          // onChange={onChange}
        />
      </Html>
    );

  return (
    <Text
      ...
      onDblClick={() => setIsTextEditing(true)}
      
    />
  );
};

index.tsx

export const Html = dynamic(
  () => import("react-konva-utils").then((mod) => mod.Html),
  {
    ssr: false,
  }
)

Solution 1:^[1]

Hi @jmecs I had caught same issue after updating the library, and I have fixed it deleted yarn.lock (or package.lock if you are using npm), and make install again.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ruslan Semenov

'ESM packages (konva) need to be imported. Use 'import' to reference the package instead

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]