TypeError: Super expression must either be null or a function, not undefined

[luin]

Hey @benyu 👋

Can you provide more context, especially reproducible steps?

[manchenkoff]

Hi, I actually faced the same issue during development with Nuxt 3. The weird thing is that I couldn't reproduce the problem with the dev-server but it occurs in the production mode by running on Node.

Here is the SFC file in Vue 3 with TypeScript

<script lang="ts" setup>
import { QuillEditor } from '@vueup/vue-quill';
import QBlotFormatter from 'quill-blot-formatter';
import QImageUploader from 'quill-image-uploader';
import { Colors } from '~/base/enum/Colors';

import '@vueup/vue-quill/dist/vue-quill.snow.css';

export interface QuillProps {
    modelValue?: string;
    label?: string;
    placeholder: string;
    required?: boolean;
    disabled?: boolean;
    readonly?: boolean;
    height?: string;
}

export interface QuillEvents {
    (e: 'update:modelValue', value?: string): void;
}

const props = withDefaults(defineProps<QuillProps>(), {
    modelValue: undefined,
    label: undefined,
    height: '15rem',
});

const emit = defineEmits<QuillEvents>();

const { upload } = useApi();

const disabledColor = Colors.Pearl;

const toolbar = [
    [
        'bold',
        'italic',
        'underline',
        'strike',
        { header: 2 },
        'blockquote',
        'code-block',
    ],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ script: 'sub' }, { script: 'super' }],
    [{ align: [] }, { indent: '-1' }, { indent: '+1' }],
    [{ size: ['small', false, 'large', 'huge'] }],
    [{ header: [2, 3, 4, 5, 6, false] }],
    [{ color: [] }, { background: [] }],
    ['link', 'image', 'video'],
    ['clean'],
];

const modules: Array<any> = [
    {
        name: 'blotFormatter',
        module: QBlotFormatter,
    },
    {
        name: 'imageUploader',
        module: QImageUploader,
        options: {
            upload: async (file: any) => {
                return await upload.image(file);
            },
        },
    },
];

const value = computed({
    get: () => props.modelValue,
    set: (value?: string) => {
        if (value === '') {
            value = undefined;
        }

        emit('update:modelValue', value);
    },
});
</script>

<template>
    <div>
        <QuillEditor
            v-model:content="value"
            :read-only="props.readonly || props.disabled"
            :placeholder="props.placeholder"
            :enable="!props.disabled"
            :toolbar="toolbar"
            :modules="modules"
            content-type="html"
            theme="snow"
        />
    </div>
</template>

<style lang="scss">
.ql-container {
    min-height: v-bind(height) !important;

    .ql-editor {
        min-height: inherit;
    }
}

.ql-disabled {
    background-color: v-bind(disabledColor);
    cursor: not-allowed;
}
</style>

At first, I was thinking that the problem is related to Vue/Nuxt/TypeScript but actually found several mentions of the same problem with plain Quill and JS. Maybe this will help for reproducing.

[manchenkoff]

Btw, found the issue, replacing the import of BlotFormatter helped 😄 Details here https://github.com/Fandom-OSS/quill-blot-formatter/issues/39

[jellyspoon]

Btw, found the issue, replacing the import of BlotFormatter helped 😄 Details here Fandom-OSS/quill-blot-formatter#39

You are a life saver

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide :pray: