Can't find variable: Quill when registering Quill modules #171

aral · 2018-03-03T18:01:06Z

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

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

The text was updated successfully, but these errors were encountered:

aral · 2018-03-03T21:54:43Z

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 · 2018-03-03T21:57:50Z

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

aral · 2018-03-04T14:11:01Z

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 · 2018-03-04T18:52:28Z

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

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)

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

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

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

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 · 2018-03-21T13:26:48Z

@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 · 2018-03-21T15:15:52Z

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

jipengzhu · 2018-05-31T11:15:00Z

@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 · 2018-07-11T15:52:35Z

It works. Thanks a lot..

yarnball · 2018-08-11T14:16:28Z

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 · 2018-09-12T04:40:47Z

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

Added in webpack config.
It works.

priteshkadiwala · 2018-09-14T20:25:48Z

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.

RHMason · 2018-10-31T03:15:20Z

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 · 2019-03-02T07:01:18Z

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

ploca14 · 2019-03-06T14:52:40Z

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

Could you send an example how you did it?

AnSungWook · 2019-10-21T05:23:48Z

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 · 2019-12-03T12:17:58Z

Hi,

Is there anyone implemented quill-better-table?

Thanks

finebo · 2020-03-25T02:14:21Z

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

golffy2538 · 2020-04-03T04:21:35Z

### qweqweqe

``

nazmirket · 2021-07-13T11:14:12Z

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

giovw · 2021-08-27T21:15:48Z

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

aral closed this as completed Mar 3, 2018

aral reopened this Mar 4, 2018

This was referenced Mar 5, 2018

Link to fix for Quill is defined error in modules #173

Merged

Cannot read property 'imports' of undefined Nuxtjs/SSR kensnyder/quill-image-resize-module#28

Open

'imports' of undefined kensnyder/quill-image-resize-module#7

Closed

surmon-china added the Stickie label Mar 5, 2018

jaskiratr mentioned this issue Nov 29, 2018

window.Quill undefined when use ImageResize module davidroyer/vue2-editor#91

Closed

nobalmohan mentioned this issue Oct 27, 2020

Nuxt registering modules doesn't work #396

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't find variable: Quill when registering Quill modules #171

Can't find variable: Quill when registering Quill modules #171

aral commented Mar 3, 2018 •

edited

Loading

aral commented Mar 3, 2018

aral commented Mar 3, 2018

aral commented Mar 4, 2018

aral commented Mar 4, 2018 •

edited

Loading

mayowa commented Mar 21, 2018

aral commented Mar 21, 2018

jipengzhu commented May 31, 2018 •

edited

Loading

matthelosh commented Jul 11, 2018

yarnball commented Aug 11, 2018 •

edited

Loading

wakaryry commented Sep 12, 2018

priteshkadiwala commented Sep 14, 2018 •

edited

Loading

RHMason commented Oct 31, 2018

anrgct commented Mar 2, 2019

ploca14 commented Mar 6, 2019

AnSungWook commented Oct 21, 2019

gomezmark commented Dec 3, 2019

finebo commented Mar 25, 2020

golffy2538 commented Apr 3, 2020

nazmirket commented Jul 13, 2021

giovw commented Aug 27, 2021 •

edited

Loading

Can't find variable: Quill when registering Quill modules #171

Can't find variable: Quill when registering Quill modules #171

Comments

aral commented Mar 3, 2018 • edited Loading

BUG REPORT TEMPLATE

Vue.js version and component version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

aral commented Mar 3, 2018

aral commented Mar 3, 2018

aral commented Mar 4, 2018

aral commented Mar 4, 2018 • edited Loading

mayowa commented Mar 21, 2018

aral commented Mar 21, 2018

jipengzhu commented May 31, 2018 • edited Loading

matthelosh commented Jul 11, 2018

yarnball commented Aug 11, 2018 • edited Loading

wakaryry commented Sep 12, 2018

priteshkadiwala commented Sep 14, 2018 • edited Loading

RHMason commented Oct 31, 2018

anrgct commented Mar 2, 2019

ploca14 commented Mar 6, 2019

AnSungWook commented Oct 21, 2019

gomezmark commented Dec 3, 2019

finebo commented Mar 25, 2020

golffy2538 commented Apr 3, 2020

nazmirket commented Jul 13, 2021

giovw commented Aug 27, 2021 • edited Loading

aral commented Mar 3, 2018 •

edited

Loading

aral commented Mar 4, 2018 •

edited

Loading

jipengzhu commented May 31, 2018 •

edited

Loading

yarnball commented Aug 11, 2018 •

edited

Loading

priteshkadiwala commented Sep 14, 2018 •

edited

Loading

giovw commented Aug 27, 2021 •

edited

Loading