Cannot read property 'imports' of undefined Nuxtjs/SSR

[iampawan31]

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)
}

[Temmermans]

Did you manage to fix this? I have the same issue in my react application.

[momoirocloverz]

me too

[momoirocloverz]

I found the answer;

[iampawan31]

@Mrjianghan Please share the solution in case you have found the answer.

[momoirocloverz]

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

[momoirocloverz]

@iampawan31 remove brace

[iampawan31]

@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

[momoirocloverz]

@iampawan31 I use spa,not ssr,sorry

[Temmermans]

I still get the same error when removing the braces.

image-resize.min.js:1 Uncaught (in promise) TypeError: Cannot read property 'imports' of undefined at Object.<anonymous> (image-resize.min.js:1) at e (image-resize.min.js:1) at Object.<anonymous> (image-resize.min.js:1) at e (image-resize.min.js:1) at image-resize.min.js:1 at image-resize.min.js:1 at webpackJsonp../node_modules/quill-image-resize-module/image-resize.min.js (image-resize.min.js:1) at Object../node_modules/quill-image-resize-module/image-resize.min.js (image-resize.min.js:1) at __webpack_require__ (bootstrap 6be6bcf07849851d57c8:707) at fn (bootstrap 6be6bcf07849851d57c8:112) at Object../src/AdminPage.jsx (quill.snow.css?1e81:26) at __webpack_require__ (bootstrap 6be6bcf07849851d57c8:707) at fn (bootstrap 6be6bcf07849851d57c8:112) at <anonymous>

[momoirocloverz]

@Temmermans sorry ,only spa

[Temmermans]

@Mrjianghan It is an spa application.

[momoirocloverz]

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

@Temmermans

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

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

[wuzehao16]

@Temmermans Do you know the answer to this question?

[aral]

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

[ggJSC]

Is there any way to resolve this without using vue-quill-editor? I'm using VueJS but I've already setup my whole project without using that library. I'm trying to add quill-image-resize-module but it's failing at window.Quill.imports. I've tried adding window.Quill to a webpack plugin but that doesn't work.

[borodean]

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

[partikule]

Adding Quill to the window object is just ugly and IMHO, an "quick and durty" workaround.

The problem comes, as previously said, from the Toolbar module, which consider ( !!! ) that the Quill object is attached to window.

I guess the author has planned to change that, but that he hasn't today the time to go further with this module.

Toolbar.js should contain something like this (the removed line is commented) :

import VQuill from 'quill'
const Quill = window.Quill || VQuill

// const Parchment = window.Quill.imports.parchment;
const Parchment = Quill.imports.parchment;

[partikule]

Resolved . See here : https://github.com/kensnyder/quill-image-resize-module/pull/38

Any comments are welcome.

[jaskiratr]

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

[Eric-art-coder]