Quill Resize Module Error on Try to Delete Image Next Js

[umarez]

Im using React-Quill with React-quill-resize-module for resizing the image. All functionality was fine until i want to remove image from the editor. When i press delete button on my image (try to remove the image from the editor), it resulting an error like this

error message: Call Stack HTMLDocument.checkImage node_modules\quill-image-resize-module-react\image-resize.min.js (1:15098)

Here's my editor component code:

Quill.register('modules/imageResize', ImageResize);

const modules = {
    ...,
    imageResize: {
      parchment: Quill.import('parchment'),
      modules: ['Resize', 'DisplaySize'],
    },
  };

  const formats = [
    ...
  ];
  return (
    <ReactQuill
      value={value}
      onChange={setValue}
      modules={modules}
      formats={formats}
      theme="snow"
    />
  );

This is how i import the editor in my page:

const Editor = dynamic(() => import('@app/components/editor/Editor'), {
  ssr: false,
});

const EditorPage = () => {
  ...
   return <Editor {...editorProps} />
}

My assumptions was it has to be SSR problems, because when i read the quill-resize-module code, it try to access window.quill in checkImage functions. However im not sure enough about this, but im very thankful if there is any advice to resolve this error!

[Romienas]

Adding window.Quill = Quill to component solved this problem

[emiljano17]

Hi, sorry I'm late. In my next.config.js file, I had to add this in module.exports object:

webpack: (config, options) => { config.module.rules.push({ test: /.js$/, exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/, loader: 'babel-loader' }); config.plugins.push( new webpack.ProvidePlugin({ 'window.Quill': 'quill' }) ); return config; }

Also don't forget to import 'webpack' in the beginning like this: const webpack = require('webpack');

[DawoodFayyaz23]

Adding window.Quill = Quill to component solved this problem

this works but can you explain why this works and what caused the issue

[ngovanduy0908]

in Reactjs, you set: import Quill from "quill"; window.Quill = Quill;

[koumcs22]

I am also facing this issue for this version "react-quill": "^2.0.0",

Cannot read properties of undefined (reading 'find') TypeError: Cannot read properties of undefined (reading 'find') at HTMLDocument.checkImage (http://localhost:3001/static/js/vendors-node_modules_quill-image-compress_dist_quill_imageCompressor_min_js-node_modules_quil-f89f13.chunk.js:6766:71)