Integrating with vue-quill on Vue3 gives error.

[manasvi2001]

<template>
  <section>
    <quill-editor
      theme="snow"
      toolbar="full"
      v-model:content="content"
      :options="options"
      :modules="modules"
    />
  </section>
</template>

<script>
import { QuillEditor } from "@vueup/vue-quill";
import BlotFormatter from "quill-blot-formatter";

export default {
  name: "QEditor",
  components: {QuillEditor},
  data() {
    return {
      content: {},
      options: {
        placeholder: "Create a story...",
      },
      modules: {
        name: "blotFormatter",
        module: BlotFormatter,
        options: {/* options */},
      },
    };
  },
};
</script>

This is my code to integrate quill-blot-formatter with vue-quill but I am getting this console error. I followed this reference: https://vueup.github.io/vue-quill/guide/modules.html#example

quill-blot-formatter.js:187 Uncaught (in promise) TypeError: Cannot read property 'className' of undefined
    at new BlotFormatter (quill-blot-formatter.js:187)
    at SnowTheme.addModule (quill-59b73590.js:6093)
    at SnowTheme.addModule (quill-59b73590.js:6719)
    at quill-59b73590.js:6085
    at Array.forEach (<anonymous>)
    at SnowTheme.init (quill-59b73590.js:6083)
    at new Quill (quill-59b73590.js:1182)
    at initialize (vue-quill.js:1611)
    at vue-quill.js:1585
    at callWithErrorHandling (runtime-dom.esm-bundler-5d8bbcf1.js:1337)

Am I missing something in configuration or is it really an issue?

Some additional info from my debugging: On putting breakpoints in quill-blot-formatter.js I found in this line, this.options = deepmerge(DefaultOptions, options, { arrayMerge: dontMerge }); DefaultOptions is not getting populated and coming as undefined for me.

I installed quill-blot-formatter using npm. The version I am using is: "quill-blot-formatter": "1.0.5"

[wangbinbinge]

do not use import BlotFormatter from 'quill-blot-formatter' use import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';

[xwnwho]

do not use import BlotFormatter from 'quill-blot-formatter' use import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';

It's a solution, but can you tell me why?

[xwnwho]

very strange. i use vite, in development no error shows, but in production it occur.

[whr2349]

我也是遇到这个问题

[zuoWinger]

en:yes . use vite dev no error , use vite build and preview is error zh-cn: 使用vite 开发模式，不会报错。打包也通过type-check 后 dist 部署，就会报错 en:This This problem led me to check for a long time zh-cn:这个问题 导致我 查了很久很久 en:This function of changing the image size is very important. Why don't you integrate it by yourself? You have to use plug-ins zh-cn:这个改变图片大小功能很重要，为什么官方不自己集成呢，非要用插件 last, thankyou

[Nelwhix]

@xiaozuojiushizuoxiao can you create a fork and we work on it together?

[Nelwhix]

@xiaozuojiushizuoxiao I have had the same problem. I tried this but I am getting the config wrong. If you can configure it properly and show me that will be nice

[zuoWinger]

@Nelwhix Sorry to try other plug-ins

[Nelwhix]

@xiaozuojiushizuoxiao If you find any good ones, please send here thanks

[zuoWinger]

@Nelwhix Okay, you too

[Nelwhix]

@xiaozuojiushizuoxiao I found an okay replacement here