Quill Resize Module Error on Try to Delete Image Next Js

[umarbuild]

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)