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: https://github.com/kensnyder/quill-image-resize-module/issues/7

We should document the solution at https://github.com/kensnyder/quill-image-resize-module/issues/7#issuecomment-320528381 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 https://github.com/kensnyder/quill-image-resize-module/issues/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)

[wakaryry]

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

Added in webpack config. It works.

[priteshkadiwala]

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

1. You will have to make a new file called vue.config.js

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

3. Finally paste the code below in your component:
```js
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.

[RHMason]

Wonder if I could get a little help. I’ve been trying for weeks to get Vue-Quill-Editor running with Nuxt without much success. I’ve learned a lot on here but still ended up short. If I enable the nuxt-quill plugin I get a ‘hook’ error. If I don’t, I receive a ‘failed to resolve directive: Quill’ error. I’m running Nuxt 2.

Thank you,

Rick

Here’s my code:

Vue-config.js

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

Nuxt-quill-plugin.js

import Vue from 'vue' import VueQuillEditor, {quill} from 'vue-quill-editor/dist/ssr' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' Vue.use(VueQuillEditor)

Main.scss

.container { width: 60%; margin: 0 auto; padding: 50px 0; .quill-editor { min-height: 200px; max-height: 400px; overflow-y: auto; } } Nuxt.config.js

css:[ 'vuetify/src/stylus/main.styl', '@/assets/scss/main.scss', 'quill/dist/quill.bubble.css', ],

plugins: [ '@/plugins/vuetify', // { src: '~plugins/nuxt-quill-plugin', ssr: false }, ],

modules: [ [ 'nuxt-sass-resources-loader', [ 'assets/scss/main.scss' ] ]

Index.vue

// Editor

template section class="container" div class="quill-editor" :content="content" @change="onEditorChange($event)" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" v-quill:myQuillEditor="editorOption" /div /section /template

script export default { data() { return { content: '

I am Example

', editorOption: { // some quill options modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'] ] } } } }, mounted() { console.log('app init, my quill insrance object is:', this.myQuillEditor) setTimeout(() => { this.content = 'i am changed' }, 3000) }, methods: { onEditorBlur(editor) { console.log('editor blur!', editor) }, onEditorFocus(editor) { console.log('editor focus!', editor) }, onEditorReady(editor) { console.log('editor ready!', editor) }, onEditorChange({ editor, html, text }) { console.log('editor change!', editor, html, text) this.content = html } } /script

[anrgct]

thanks, I resolved problems on quill-emoji.js by this way

[ploca14]

thanks, I resolved problems on quill-emoji.js by this way

Could you send an example how you did it?

[AnSungWook]

thank you! This solution solved my problem!

image upload base64 -> url

html tag
 <quill-editor id="editor" style="height: 500px;" v-model="contentItem.contents" 
                      :content="content_edit" :options="toolbarOption" @ready="onEditorReady($event)">
        </quill-editor>
        <input style="display:none;" type="file" id="getImageFile" @change="uploadImage($event)">

vue data
toolbarOption: {
        modules : {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
              ['blockquote', 'code-block'],

              [{ 'header': 1 }, { 'header': 2 }],               // custom button values
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
              [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
              [{ 'direction': 'rtl' }],                         // text direction

              [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

              [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
              [{ 'font': [] }],
              [{ 'align': [] }],

              ['clean'], 
              ['link', 'image', 'video']
              ],
            handlers: {
              'image' : function(){
                document.getElementById('getImageFile').click();
              }
            }
          }
        }
      }

function 
onEditorReady(editor){
      console.log( editor );
      this.quill_editor = editor;
    },

 uploadImage(e){
      var form = new FormData();
      var file = e.target.files[0];

[gomezmark]

Hi,

Is there anyone implemented quill-better-table?

Thanks

[finebo]

@aral Have you used quill-emoji? I introduced this module without any error, but the emoji module cannot be displayed or work properly

[golffy2538]

### qweqweqe

``

[nazmirket]

Hey, When I import webpack package in my nuxt.config.js file it breaks the build on Vercel. but works on local.

[giovw]

This solution solved my problem! In nuxt.config.js

import webpack from 'webpack' export default { // Global page headers (https://go.nuxtjs.dev/config-head)

// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins) plugins: [ { src: '~plugins/nuxt-quill-plugin', ssr: false } ],

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

In plugins > nuxt-quill-plugin.js

`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' import 'quill/dist/quill.bubble.css'

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