*Could not find a declaration file for module '@toast-ui/react-image-editor'.

[aymeric75]

Describe the bug Because my React is version 18, I had to use "force" for the installation:

npm i --save-dev @types/toast-ui__react-image-editor --force

Then when importing in my component, the followings:

import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/react-image-editor';

I get an error :

Could not find a declaration file for module '@toast-ui/react-image-editor'.

I checked in the node_modules folder, I found a @toast-ui\react-image-editor folder:

[aymeric75]

No solution ?

[Serena867]

A workaround for this would be to use tui-image-editor instead of the react-image-editor wrapper, create a component, and use that component as needed.

import React from "react";
import TuiImageEditor from "tui-image-editor";
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";

class ImageEditor extends React.Component {

  rootEl = React.createRef();
  imageEditorInst = null;

  componentDidMount() {
    this.imageEditorInst = new TuiImageEditor(this.rootEl.current, {
      ...this.props
    }, );
  }

  componentWillUnmount() {
    // this.unbindEventHandlers();
    this.imageEditorInst.destroy();
    this.imageEditorInst = null;
  }

  render() {
    return <div ref={this.rootEl} />;
  }
}

export default function ImageEditorTool() {

  const props = {
    includeUI: {
      menu: ["shape", "filter", "text"],
      initMenu: "filter",
      uiSize: {
        width: "99vw",
        height: "80vh"
      },
      menuBarPosition: "bottom"
    },
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    selectionStyle: {
      cornerSize: 20,
      rotatingPointOffset: 70
    },
  };

  return (
    <div>
      <ImageEditor {...props} />
    </div>
  );
}

Anyone who comes across this using Next.js could use dynamic imports to use this in their code with ssr disabled. Rename the variable "ImageEditorImport" to whatever you want.

import dynamic from "next/dynamic";
const ImageEditorImport = dynamic(() => import("../components/image_editor"), {ssr: false});

[lja1018]

@aymeric75 Thank you for the report. I'll check.

[karkir0003]

@lja1018, were you able to resolve the issue with the solution suggested by @Serena867?