Won't work with react-quill v2.0.0

[fdemello]

I followed the example for react-quill. I have:

import 'react-quill/dist/quill.snow.css'
import ImageUploader from 'quill-image-uploader'
import ReactQuill, { Quill } from 'react-quill'

Quill.register('modules/imageUploader', ImageUploader)

and when I add imageUploader to modules the component doesn't render.

[hunandika]

Hi @fdemello, I using react-quill version 2.0.0 and work properly. I try define modules config inside react function component react-quill didn't work. Then I try define modules config outside function component now working properly.
Here is my snippet code, hope it helps you

package.json:

"quill-image-uploader": "^1.2.3",
"react-quill": "^2.0.0",

QuillEditor.js:

import React, { forwardRef } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import ImageUploader from 'quill-image-uploader';
import MarkdownShortcuts from 'quill-markdown-shortcuts';

Quill.register('modules/markdownShortcuts', MarkdownShortcuts);
Quill.register('modules/imageUploader', ImageUploader);

// <-- Define modules outside function component -->
const modules = {
  toolbar: [
    [{ header: '1' }, { header: '2' }, { font: [] }],
    [{ size: [] }],
    ['bold', 'italic', 'underline', 'strike'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['link', 'image'],
    ['clean']
  ],
  clipboard: {
    matchVisual: false
  },
  markdownShortcuts: {},
  imageUploader: {
    upload: (file) => {
      console.log(file);
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('https://source.unsplash.com/FV3GConVSss/900x500');
        }, 3500);
      });
    }
  },
};

// <-- Define formats outside function component -->
const formats = [
  'header',
  'font',
  'size',
  'bold',
  'italic',
  'underline',
  'strike',
  'link',
  'list',
  'bullet',
  'image',
  'imageBlot'
];

export default forwardRef((props, ref) => {
return (
    <EditorWrapper>
      <ReactQuill
        theme="snow"
        modules={modules}
        formats={formats}
      />
    </EditorWrapper>
  );
}