Skip to content

TypeError: Cannot read properties of undefined (reading 'className') #315

@fabus961

Description

@fabus961

Version
@vueup/vue-quill version: "^1.0.0",

Describe the bug
It seems, that quill is not able to process inputs during production only. It renders on the page but does not operate properly displaying inputs (e.g. when loading HTML contents from a DB - or loading a hard coded HTML string) inside the :content property.

Quill usage:

<QuillEditor
      id="quillEditor"
      :key="quillInput"
      :content="quillInput.description"
      content-type="html"
      toolbar="full"
      :modules="modules"
      theme="snow"
      @update:content="updateContent"
    />

Using Blot Formatter from "quill-blot-formatter"

  const modules = {
    name: 'blotFormatter',
    module: BlotFormatter,
    options: {
      overlay: {
        style: {
          border: '2px solid #e2e2e2',
        }
      }
    },
  }

Error Message:

TypeError: Cannot read properties of undefined (reading 'className')
    at new t (index.1edf25e6.js:1:2800)
    at x.value (index.4d1e2715.js:82:22285)
    at x.value (index.4d1e2715.js:83:2735)
    at index.4d1e2715.js:82:22160
    at Array.forEach (<anonymous>)
    at x.value (index.4d1e2715.js:82:22118)
    at new J (index.4d1e2715.js:61:5408)
    at a (index.4d1e2715.js:103:1662)
    at index.4d1e2715.js:103:1412
    at index.4d1e2715.js:1:32781

To Reproduce
Steps to reproduce the behavior:

  1. Implement Quill Editor as seen above
  2. Load contents in :content prop via DB or hard coded HTML String
  3. See error

Expected behavior
Quill HTML contents passed in via the :content prop should render properly.

Browser (please complete the following information):

  • Browser chrome
  • Version 109.0.5414.120

Additional context
I get following warning dropped alongside the error. I am not 100% sure if this is related, but It might help you guys.

index.4d1e2715.js:62 quill Overwriting modules/blotFormatter with ƒ t(e){var i=this,n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};me(this,t),this.onClick=function(){i.hide()},this.quill=e,this.options=(0,de.default)(ve.default,n,{arrayMerge:be}),this.cu…
l @ index.4d1e2715.js:62

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions