Can't find variable: Quill when registering Quill modules

[aral]

BUG REPORT TEMPLATE

Vue.js version and component version

Nuxt 1.3.0, Vue 2.5.13

Reproduction Link

n/a (issue has to do with Quill module usage in Nuxt)

Steps to reproduce

1. In Nuxt, add a module during the configuration of the vue-quill-editor plugin (plugins/vue-quill-editor.js):

/* Client-side Quill Editor plugin */
import Vue from 'vue'

import Quill from 'quill'
import VueQuillEditor from 'vue-quill-editor'

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

// Add Markdown Shortcuts plugin: this allows the use of
// e.g., # Heading 1, **bold** etc., to trigger style changes.
// This is the module I managed to solve by forking the original, removing all Webpack-related stuff, and importing the classes directly: https://github.com/aral/quill-markdown-shortcuts-for-vue-quill-editor
import MarkdownShortcuts from 'quill-markdown-shortcuts-for-vue-quill-editor'
Quill.register('modules/markdownShortcuts', MarkdownShortcuts)

// This is the module I encountered the same problem on:
import Emoji from 'quill-emoji/dist/quill-emoji.js'
Quill.register('modules/emoji', Emoji)

Vue.use(VueQuillEditor)

In my Nuxt config, I have it set up so that Nuxt does not apply SSR:

  plugins: [
    '~plugins/buefy',
    { src: '~plugins/vue-quill-editor', ssr: false }
  ],

What is Expected?

It should work.

What is actually happening?

Error: Can’t find variable: Quill.

I’ve documented how I managed to solve this for one module here: https://github.com/aral/quill-markdown-shortcuts-for-vue-quill-editor

However, I’ve just encountered the same issue on another component so I think there’s something inherently problematic with trying to use modules with Nuxt.

PS. If, instead of importing the script from the dist folder, I do import Emoji from 'quill-emoji', I get:

These dependencies were not found:

* aws-sdk in ./node_modules/fsevents/node_modules/node-pre-gyp/lib/unpublish.js, ./node_modules/fsevents/node_modules/node-pre-gyp/lib/publish.js and 1 other
* child_process in ./node_modules/fsevents/node_modules/detect-libc/lib/detect-libc.js, ./node_modules/fsevents/node_modules/node-pre-gyp/lib/testbinary.js and 9 others
* fs in ./node_modules/cacache/get.js, ./node_modules/chownr/chownr.js and 54 others
* module in (webpack)/lib/node/NodeTargetPlugin.js
* net in ./node_modules/forever-agent/index.js, ./node_modules/fsevents/node_modules/forever-agent/index.js and 4 others
* tls in ./node_modules/forever-agent/index.js, ./node_modules/fsevents/node_modules/forever-agent/index.js and 2 others

To install them, you can run: npm install --save aws-sdk child_process fs module net tls

[aral]

OK, so this seems to be an issue with how a Quill module is structured.

The quill-image-drop-module, for example works out of the box.

It seems some of the modules are registering the module with Quill themselves.

I don’t see any alternative but to fork the modules in question and fix them to play better with workflows that involve Nuxt/Vue/etc. Closing this as it’s not an issue with vue-quill-editor but it would be good to make a note of this in the documentation as, no doubt, other people will run into the problem. Also, the Quill project should probably standardise on a compatible module distribution format, perhaps based on how quill-image-drop-module does it.

[aral]

(Ah, and quill-image-drop-module doesn’t use Webpack.)

[aral]

Re-opening this as it seems to be an issue that many people run into and it should, at the very least, be documented in the vue-quill-editor docs.

For a comprehensive thread, with a workaround, see: kensnyder/quill-image-resize-module#7

We should document the solution at kensnyder/quill-image-resize-module#7 (comment) by @ibudisteanu

[aral]

The solution for installing plugins like quill-image-resize-module in a Nuxt/SSR app:

1. In your plugins folder, create a plugin for vue-quill-plugin:

import Vue from 'vue'
import Quill from 'quill'
import VueQuillEditor from 'vue-quill-editor'

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

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

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

Vue.use(VueQuillEditor)

2. Add the vue-quill-editor as a no-SSR plugin in nuxt.config.js:

module.exports = {
  plugins: [
    { src: '~plugins/vue-quill-editor', ssr: false }
  ]
}

3. Again in nuxt.config.js, add Quill as a Webpack plugin so that Quill modules like quill-image-resize-module that use Webpack can find the Quill reference:

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

4. Finally, add the component into your page (e.g., in pages/index.vue):

<template>
  <div>
    <no-ssr>
      <quill-editor
        v-model='editorContent'
        ref='textEditor'
        :options='editorOption'
       ></quill-editor>
    </no-ssr>
  </div>
</template>

<script>
export default {
  data () {
    return {
      editorContent: '',
      editorOption: {
        placeholder: 'What’s on your mind?',
        theme: 'snow',
        modules: {
          imageResize: true
        }
      }
    }
  }
}
</script>

[mayowa]

@aral Thank you for the snippet, You saved me from hours of frustration!
I had to make the following modifications for it to work (for me)

1: in the plugin file

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

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

Quill.register('modules/imageResize', ImageResize)
Vue.use(VueQuillEditor)

2: in nuxt.config.js

var webpack = require('webpack')

Thank you!

[aral]

Hey @mayowa, my pleasure. Glad to hear it helped and thank you for sharing your own experience also :)

[jipengzhu]

@aral hi

is there a resolution for a spa app with webpack ?

the resolution in kensnyder/quill-image-resize-module#7 given by jspaine doesn't work for me

[matthelosh]

It works. Thanks a lot..

[yarnball]

Hi.
Nice work on this!

For a non SSR app (using Vue CLI 3) I am also having this same issue:
"Quill is not loaded in this application" when I try to import modules.

Have I done something wrong here?

import VueQuillEditor, {Quill} from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import {Markup, MarkupMode} from 'quill-markup';

Quill.register('modules/markup', Markup)
Vue.use(VueQuillEditor)