CODEWITHSUNDEEP
next.jskonvajsreact-konvakonvakonvajs-reactjs
jmecs
jmecs

Reputation: 187

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,
  }
);

OR

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,
  }
)

Upvotes: 3

Views: 2499

Answers (2)

tbo47
tbo47

Reputation: 3299

You need to import konva-es instead of konva https://github.com/tbo47/konva-es?tab=readme-ov-file

Upvotes: 0

Ruslan Semenov
Ruslan Semenov

Reputation: 319

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.

Upvotes: 1

Related Questions