quill-image-resize-module: Cannot read property 'imports' of undefined Nuxtjs/SSR

Getting the following error when i am adding the module to Quill.

Uncaught TypeError: Cannot read property 'imports' of undefined
    at Object.<anonymous> (app.508b1bdd306748193b03.js:9923)
    at e (app.508b1bdd306748193b03.js:9923)
    at Object.<anonymous> (app.508b1bdd306748193b03.js:9923)
    at e (app.508b1bdd306748193b03.js:9923)
    at app.508b1bdd306748193b03.js:9923
    at app.508b1bdd306748193b03.js:9923
    at webpackJsonp../node_modules/quill-image-resize-module/image-resize.min.js (app.508b1bdd306748193b03.js:9923)
    at Object../node_modules/quill-image-resize-module/image-resize.min.js (app.508b1bdd306748193b03.js:9923)
    at __webpack_require__ (manifest.2ea815068b6b951c57aa.js:713)
    at fn (manifest.2ea815068b6b951c57aa.js:118)

~/plugins/nuxt-quill-plugin.js

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

if (process.browser) {
  const VueQuillEditor = require('vue-quill-editor/ssr')
  Quill.register('modules/imageResize', ImageResize)
  Vue.use(VueQuillEditor)
}

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 7
Comments: 21

Most upvoted comments

@Temmermans

plugins: [ new webpack.ProvidePlugin({ ‘window.Quill’: ‘quill’ }) ]

https://github.com/kensnyder/quill-image-resize-module/issues/7

momoirocloverz on Jan 4, 2018

@Mrjianghan After i remove the brace, i get the following error in Browser Console.

TypeError: window.Quill is undefined
[Learn More]
image-resize.min.js:1
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
vue.runtime.esm.js:7911
[HMR] connected
client.js:87

iampawan31 on Jan 3, 2018

@ggJSC imports-loader worked for me:

config.module = {
  rules: [{
    test: /\.js$/,
    loader: 'imports-loader?window.Quill=quill',
    include: path.resolve('./node_modules/quill-image-resize-module')
  }]
};

Then you don’t have to register the module, just import it straight away:

import 'quill-image-resize-module';

This is due to https://github.com/kensnyder/quill-image-resize-module/blob/master/src/ImageResize.js#L198.

borodean on Apr 7, 2018

@iampawan31 I use spa,not ssr,sorry

momoirocloverz on Jan 3, 2018

The solution is based on @Mrjianghan’s answer (if a Quill module uses Webpack, you must expose the Quill instance as a Webpack plugin so that it can find it. Sadly, this was not documented anywhere).

I wrote up a more comprehensive solution, in hopes it helps others and submitted a pull request with a link to that solution for the main readme in vue-quill-editor: https://github.com/surmon-china/vue-quill-editor/issues/171#issuecomment-370253411

aral on Mar 5, 2018

@Temmermans it’s working for `me,

my code

`import Quill from ‘quill’;

import  ImageResize  from 'quill-image-resize-module';

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

momoirocloverz on Jan 3, 2018

guimeisang on Mar 6, 2020

For Nuxt/SSR this solution helped https://github.com/surmon-china/vue-quill-editor/issues/171#issuecomment-370253411

jaskiratr on Nov 29, 2018