'imports' of undefined

Using Vue.js 2.2.6 with official webpack template and Vue-Quill-Editor

Console logs in dev run:

Uncaught TypeError: Cannot read property 'imports' of undefined (image-resize.min.js?c9ce:1)

Code here:

// main.js
<script>

    import Vue from 'vue';
    // some plugins here
    import VueQuillEditor from 'vue-quill-editor';
    Vue.use(VueQuillEditor);
    
</script>

// some *.vue file
<script>

	import Quill from 'quill';
	import { ImageResize } from 'quill-image-resize-module';

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

	export default {
		name: 'editor',
		data() {
			return {
			    // some code
				Editor: {
				    // some code
					options: {
					    // some code
						modules: {
							imageResize: {
								displaySize: true
							}
						}
					}
				}
			}
		}
	}
</script>

[jspaine]

Managed to get v3.0 and the image-drop module working with webpack

webpack.config.js:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
      loader: 'babel-loader',
      query: {...}
    }
  ]
}
plugins: [
  new webpack.ProvidePlugin({
    'window.Quill': 'quill'
  })
]

Component.js:

import {ImageDrop} from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'

Quill.register('modules/imageResize', ImageResize)
Quill.register('modules/imageDrop', ImageDrop)

const quillModules = {
  ...
  imageDrop: true,
  imageResize: {}
}

You can also import the minified file from each module instead of transforming them with babel, but the image-drop module registers itself with Quill so you have to remove that.

[ibudisteanu]

@jspaine thanks a lot for assisting me!!! After 4-5 hours of pulling my hair… if found the solution:

    new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js',
    }),

I had to declare even Quill in the webpack…