Quill Editor Component throws only in production -> TypeError: Cannot read properties of undefined (reading 'className') - laravel

Question

I'm using quill editor as rich text editor component and in development everything works fine but as soon as I launch my web app in a production environment, the component throws following error:
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
The top log message suggests that cms-editor seems to be the origin of the error:
<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>
The error is thrown instantly, when the component is loaded. The props do not seem to play a role because I tried commenting them out and the error still gets thrown. Any idea how I could debug this?
I'm using inertia.js if that is relevant.

Answer 1

Your blot formatter might be configured in a wrong way. I didn't really use this feature in my App, so I disabled / removed it and the production error disappears.
See issue here:
https://github.com/vueup/vue-quill/issues/315