Quill Editor 组件仅在生产中抛出 -> TypeError：无法读取未定义的属性（读取 \'className\'）

Question

我正在使用 quill editor 作为 rich text editor component 并且在开发中一切正常但是一旦我在生产环境中启动我的网络应用程序，该组件就会抛出以下错误：

TypeError: Cannot read properties of undefined (reading 'className')
    at new t (cms-editor.58b2a676.js:1:4281)
    at T.value (main.5b8d6e17.js:809:22276)
    at T.value (main.5b8d6e17.js:810:2735)
    at main.5b8d6e17.js:809:22151
    at Array.forEach (<anonymous>)
    at T.value (main.5b8d6e17.js:809:22109)
    at new Y (main.5b8d6e17.js:788:5408)
    at o (main.5b8d6e17.js:829:1661)
    at main.5b8d6e17.js:829:1411
    at Kt (main.5b8d6e17.js:4:656)
Gv @ main.5b8d6e17.js:4
or @ main.5b8d6e17.js:4
Kt @ main.5b8d6e17.js:4
wt @ main.5b8d6e17.js:4
t.__weh.t.__weh @ main.5b8d6e17.js:4
Do @ main.5b8d6e17.js:4
te @ main.5b8d6e17.js:4
mount @ main.5b8d6e17.js:4
t.mount @ main.5b8d6e17.js:4
setup @ main.5b8d6e17.js:831
(anonymous) @ main.5b8d6e17.js:12
Promise.then (async)
zh @ main.5b8d6e17.js:12
(anonymous) @ main.5b8d6e17.js:831

顶部日志消息表明cms-editor似乎是错误的根源：

<template>
  <div id="cms-editor" class="cms-editor">
    <quill-editor ref="quill" :modules="modules" :toolbar="toolbar" v-model:content="content" contentType="html"/>
  </div>
</template>

<script setup>
import BlotFormatter from 'quill-blot-formatter'
import {ref, watchEffect} from 'vue'
import {Quill} from "@vueup/vue-quill";

const props = defineProps({
    body: String,
    triggerEmit: Boolean
})

const content = ref(props.body || '')

const emit = defineEmits(['emitBody'])

watchEffect(async () => {
    if (props.triggerEmit) {
        const body = await compressHtml(content.value)
        emit('emitBody', body)
    }
})

const quill = ref(null)

Quill.debug('error')

const compressImage = (dataUrl, width, mime, resize) => {
    return new Promise((resolve) => {
        const img = new Image();
        img.src = dataUrl
        img.onload = () => {
            const height = Math.round(img.height / img.width * width)
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0, width, height);
            resolve(canvas.toDataURL(mime, resize));
        }
    })
}

const compressHtml = async (content) => {
    let body = content.split('<')
    let count = 1
    for (const id in body) {
        count = count + 1
        let el = body[id]
        if (el.substr(0, 3) == 'img') {
            const dataUrl = el.split('"')[1]
            const src = el.split('"')[1].split(',')[1]
            const mime = el.split('data:')[1].split(';')[0]
            const size = atob(src).length;
            if (size >= 250000) {
                let img_el = await compressImage(dataUrl, 600, mime, .9)
                    .then(res => {
                        return 'img src="' + res + '">';
                    })
                body[id] = img_el
            }
        }
    }
    return body.join('<')
}

const toolbar = [
    [{header: [1, 2, 3, false]}],
    [{size: ['small', false, 'large', 'huge']}],
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{align: []}],
    [{list: 'ordered'}, {list: 'bullet'}],
    [{color: []}, {background: []}],
    ['link', 'image'],
    ['clean'],
]

const modules = {
    module: BlotFormatter,
}

var BaseImageFormat = Quill.import('formats/image');
const ImageFormatAttributesList = [
    'alt',
    'height',
    'width',
    'style'
];

//make quill image alignment work
class ImageFormat extends BaseImageFormat {
    static formats(domNode) {
        return ImageFormatAttributesList.reduce(function (formats, attribute) {
            if (domNode.hasAttribute(attribute)) {
                formats[attribute] = domNode.getAttribute(attribute);
            }
            return formats;
        }, {});
    }

    format(name, value) {
        if (ImageFormatAttributesList.indexOf(name) > -1) {
            if (value) {
                this.domNode.setAttribute(name, value);
            } else {
                this.domNode.removeAttribute(name);
            }
        } else {
            super.format(name, value);
        }
    }
}

Quill.register(ImageFormat, true);

</script>

加载组件时立即抛出错误。 props 似乎没有发挥作用，因为我尝试将它们注释掉，但仍然会抛出错误。知道我该如何调试吗？

如果相关的话，我正在使用inertia.js。

Answer 1

您的印迹格式化程序可能以错误的方式配置。我并没有真正在我的应用程序中使用这个功能，所以我禁用/删除了它并且生产错误消失了。

在这里查看问题： https://github.com/vueup/vue-quill/issues/315