Search code examples
next.jskonvajsreact-konvakonvakonvajs-reactjs

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

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