vue CLI 3 import image resize module

I use vue cli 3 and last version this repo .

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

import Quill from 'quill';
import { quillEditor } from 'vue-quill-editor';
// image drop
import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop);

console log

image-resize.min.js?f318:1 Uncaught TypeError: Cannot read property 'imports' of undefined
    at Object.eval (image-resize.min.js?f318:1)
    at e (image-resize.min.js?f318:1)
    at Object.eval (image-resize.min.js?f318:1)
    at e (image-resize.min.js?f318:1)
    at eval (image-resize.min.js?f318:1)
    at eval (image-resize.min.js?f318:1)
    at eval (image-resize.min.js?f318:1)
    at eval (image-resize.min.js?f318:1)
    at Object../node_modules/quill-image-resize-module/image-resize.min.js (app.js:2556)
    at __webpack_require__ (app.js:725)

why do not you change the documentation if it will not work like the documentation? !!

example https://codesandbox.io/s/18vz06x1j7

[priteshkadiwala]

Okay so I was able to solve this problem for SPA apps by doing this:

1. You will have to make a new file called vue.config.js

2. Paste this code in there:

var webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      }),
    ]
  }
}

What this does is it helps Vue import quill and help register the Image resize module

1. Finally paste the code below in your component:

import Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

and in the options for quill, make the modules true as such:

editor_option: {
 modules: {
   imageDrop: true,
   imageResize: true,
 },
 theme: 'snow'
},

and voila! The image resize and drop should work.

[UrVerySpecial]

@priteshkadiwala

First of all, thank you for your method. It really helped me. However, this is only temporary. Sometimes I will not report an error, and someTimes I will report an error. I wonder if you have encountered such a problem?? How do you solve it??

The wrong message is: quill Cannot import modules/imageResize. Are you sure it was registered? quill.js?787f:1987

[Vue warn]: Error in mounted hook: "TypeError: moduleClass is not a constructor"

I got a same error and I’ve fixed as below

. The cause I loaded quill resize module as below

const ImageResize = require('quill-image-resize-module')
Quill.register('modules/imageResize', ImageResize)

and I fixed as below, and the error has gone.

const ImageResize = require('quill-image-resize-module').default
Quill.register('modules/imageResize', ImageResize)

Good luck!