quill-image-resize-module 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

Sep 04 '18 09:09 volkanciloglu

i have the same

Sep 08 '18 18:09 lupaxa

I do also have the same problem

Sep 12 '18 22:09 priteshkadiwala

me too.....

Sep 14 '18 15:09 lacuca

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

You will have to make a new file called vue.config.js
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

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.

Sep 14 '18 20:09 priteshkadiwala

where should i place vue.config.js ?

Sep 27 '18 04:09 oonameoo

@oonameoo Place the vue.config.js file along with the package.json file

Oct 02 '18 04:10 priteshkadiwala

i did like this, but still have the problem

Oct 10 '18 07:10 xiaohubei

@xiaohubei Same problem, did you find the solution?

Oct 13 '18 09:10 Krasnov8953

@xiaohubei Same problem, did you find the solution?

Nov 05 '18 12:11 ChangQing666

Sorry, it can not solve my problem by doing like that

Nov 13 '18 09:11 xiaohubei

@ChangQing666 Sorry, it can not solve my problem by doing like that

Nov 13 '18 09:11 xiaohubei

This may help

Nov 27 '18 06:11 bigezhang

This worked for me.

Dec 06 '18 13:12 igasparetto

thanks your are true god .... i try it in nuxt project

Dec 09 '18 04:12 ilhamsa1

@priteshkadiwala nice, thx, you solved my problem.

Dec 18 '18 08:12 wenyejie

@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"

Mar 04 '19 09:03 Jxiang-jc

Here are what I did:

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)

var webpack = require('webpack')

module.exports = {
  assetsDir: '',
  publicPath: './',
  outputDir: 'dist',
  runtimeCompiler: undefined,
  productionSourceMap: undefined,
  parallel: undefined,
  css: undefined,
  lintOnSave: undefined,
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  }
}

It doesn't work for me

vue-router.esm.js?8c4f:1897 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 (23.js:22)
    at __webpack_require__ (app.js:767)

Apr 03 '19 02:04 puiiyuen

@Jxiang-jc same problem, Have you found a solution?

Jul 14 '19 08:07 CBCzed

Sorry but none of the proposed solutions above works :( I tried all versions of quill-image-resize-module including those fixed imports versions of npms but nothing works.

Jul 28 '19 23:07 glv1at118

@priteshkadiwala It works like a charm!! If you people are still having same problem, I recommend restarting your development server (using command npm run serve)

Sep 09 '19 14:09 besideL

just use ‘@taoqf/quill-image-resize-module’ replace ‘quill-image-resize-module’；all problem solved

Sep 27 '19 09:09 svenjia

this work for me, with vue framework'use strict'

const { VueLoaderPlugin } = require('vue-loader');
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

const vueRule = {
  test: /\.vue$/,
  use: 'vue-loader',
  exclude: /node_moduels/
};

const babelRule = {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@vue/babel-preset-app'],
    }
  }
}

const cssRule = {
  test: /\.(sc|sa|c)ss$/,
  use: ['vue-style-loader', 'css-loader', 'sass-loader']
};

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'frontend/src/app.js'),
  output: {
    path: path.resolve(__dirname, 'frontend/static/dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [vueRule, cssRule, babelRule],
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js',
    })
  ],
  optimization: {
    minimizer: [ new TerserPlugin() ],
  },
}

Nov 21 '19 12:11 Kittichai-ba

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!

Jan 19 '20 08:01 UrVerySpecial

It doesn't worked for me... Some depressed

Mar 26 '20 12:03 gweesin

Use import { ImageResize } from 'quill-image-resize' instead

May 02 '20 04:05 jdgamble555

Thanks for saving me... Works like a magic wand