Image handler overwrites image resize

[Camillo94]

With an image handler in place, resizing does not work anymore.

The resulting error message is: [Warning] quill – "Overwriting modules/imageResize with" – function t(e) { (2.chunk.js, line 42025) var n = this, r = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}; o(this, t), this.initializeModules = function () { n.removeModules(), n.modules = n.moduleClasses.map(function (t) {...

[Awe-n]

Hello, did you find a fix to this?

[Jinwook94]

Hello, did you find a fix to this?

In my case, the issue arose because I registered the module in an incorrect location.

Incorrect

import Quill from 'quill';
import ImageResize from 'quill-image-resize';
import React, { useState, useRef } from 'react';
import ReactQuill from 'react-quill';

const Test = () => {
  Quill.register('modules/imageResize', ImageResize);
  const [value, setValue] = useState('');
  const quillRef = useRef(null);

  const modules = {
    toolbar: [
      // Your toolbar options
    ],
    imageResize: true,
  };

  return (
    <ReactQuill
      ref={quillRef}
      theme="snow"
      value={value}
      onChange={setValue}
      modules={modules}
    />
  );
};

export default Test;

Correct

import Quill from 'quill';
import ImageResize from 'quill-image-resize';
import React, { useState, useRef } from 'react';
import ReactQuill from 'react-quill';

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

const Test = () => {
  const [value, setValue] = useState('');
  const quillRef = useRef(null);

  const modules = {
    toolbar: [
      // Your toolbar options
    ],
    imageResize: true,
  };

  return (
    <ReactQuill
      ref={quillRef}
      theme="snow"
      value={value}
      onChange={setValue}
      modules={modules}
    />
  );
};

export default Test;