Node: Uncaught TypeError: moduleClass is not a constructor

Admin 1
Viewed 5834

I want to import handler in quill. But i am still getting this error Uncaught TypeError: moduleClass is not a constructor

This is how function with quill works

import Quill from 'quill';

// IMAGE HANDLER
    const imageHandler = () => {
      const input = document.createElement('input');

      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');
      input.click();

      input.onchange = async () => {
        const file = input.files[0];
        const formData = new FormData();

        formData.append('image', file);

        // Save current cursor state
        const range = this.quill.getSelection(true);

        // Insert temporary loading placeholder image
        this.quill.insertEmbed(range.index, 'image', `${ window.location.origin }/images/loaders/placeholder.gif`);

        // Move cursor to right side of image (easier to continue typing)
        this.quill.setSelection(range.index + 1);

        const res = await apiPostNewsImage(formData); // API post, returns image location as string e.g. 'http://www.example.com/images/foo.png'

        // Remove placeholder image
        this.quill.deleteText(range.index, 1);

        // Insert uploaded image
        this.quill.insertEmbed(range.index, 'image', res.body.image);
      }
    }

// Initialize quill
    var quill = new Quill('#editor', {
      theme: 'snow',
      modules: {
        toolbar: '#toolbar',
        handlers: {
          image: imageHandler,
        }
      }
    });

When i open where is error it gaves mi this part of code from quill.js

{
    key: 'addModule',
    value: function addModule(name) {
      var moduleClass = this.quill.constructor.import('modules/' + name);
      this.modules[name] = new moduleClass(this.quill, this.options.modules[name] || {});
      return this.modules[name];
    }

I am not sure if done someting wrong or if is problem on quill side.

quill node.js image
1 Answers

I initially also got this error, but I solved it by changing the modules structure in the following way:

modules: {
   toolbar: {
      container: '#toolbar',
      handlers: {
         image: imageHandler
      }
   }
}

Note that the handlers are now defined inside toolbar instead of next to it (see https://quilljs.com/docs/modules/toolbar/ for documentation).

user_122427590
Related