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

[itinglight]

Everything works fine on dev (npm run dev) but after build I have this error:

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

Without BlotFormatter module it also works fine.
It is laravel + vue + inertia + vite + VueQuill

<template>
    <div>
        <QuillEditor theme="snow" :modules="modules"/>
    </div>
</template>

<script>
    import { QuillEditor } from '@vueup/vue-quill'
    import BlotFormatter from 'quill-blot-formatter'
    import '@vueup/vue-quill/dist/vue-quill.snow.css';

    export default  {
        components: {
            QuillEditor
        },
        setup: () => {
            const modules = {
                name: 'blotFormatter',  
                module: BlotFormatter, 
                options: {/* options */}
            }
        return { modules }
    },
}
</script>

[mortal-nf]

me too

[mariusberget92]

Same.

[hadrienestela]

same

[tedik123]

Same issue here

[tjessessky]

I had the same issue - it started working when I replaced that import line with the Readme's suggested method of importing one module at a time:

import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter'

I have absolutely no idea why that made it work, but it might be worth a shot to anyone who stumbles across this issue.

[rezaghz]

I have involved myself in this issue for several hours and tried different methods, but I did not get any results.
Finally, I thought of using it in the CDN method in the project because changing the editor was too time-consuming for me.
in html file
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill-blot-formatter.min.js"></script>
in vue file
editorModules: [ { name: 'blotFormatter', module: QuillBlotFormatter.default, options: {/* options */} }, ]

[bear320]

I also encountered the same issue, but I resolved it with the following code. (TypeScript + Vue + Vite + VueQuill)

In the vue file:

<template>
  <QuillEditor
    theme="snow"
    :toolbar="toolbarOptions"
    :modules="modules"
    contentType="html"
    v-model:content="currentEDM.content"
  />
</template>

<script setup>
import { QuillEditor, Quill } from "@vueup/vue-quill";
import BlotFormatter from "quill-blot-formatter/dist/BlotFormatter";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

// Quill: Toolbar
const toolbarOptions = [
  [{ font: [] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  ["bold", "italic", "underline", "strike"],
  [{ script: "sub" }, { script: "super" }],
  [{ color: [] }, { background: [] }],
  [{ list: "ordered" }, { list: "bullet" }, { align: [] }],
  ["link"]
];

// Quill: Modules
const modules = ref([
  {
    name: "blotFormatter",
    module: BlotFormatter,
    options: {
      /* options */
    }
  }
]);

// Quill: Quill Blot Formatter
Quill.register("modules/blotFormatter", BlotFormatter);

// Quill: Inline Style
Quill.register(Quill.import("attributors/class/align"), true);
Quill.register(Quill.import("attributors/class/font"), true);
Quill.register(Quill.import("attributors/style/align"), true);
Quill.register(Quill.import("attributors/style/font"), true);

In the quill-blot-formatter.d.ts file (if you are using TypeScript):
declare module "quill-blot-formatter/dist/BlotFormatter";

The above code worked for me, so perhaps you can give it a try.

[suka233333]

I also encountered the same issue, but I resolved it with the following code. (TypeScript + Vue + Vite + VueQuill)

In the vue file:

<template>
  <QuillEditor
    theme="snow"
    :toolbar="toolbarOptions"
    :modules="modules"
    contentType="html"
    v-model:content="currentEDM.content"
  />
</template>

<script setup>
import { QuillEditor, Quill } from "@vueup/vue-quill";
import BlotFormatter from "quill-blot-formatter/dist/BlotFormatter";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

// Quill: Toolbar
const toolbarOptions = [
  [{ font: [] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  ["bold", "italic", "underline", "strike"],
  [{ script: "sub" }, { script: "super" }],
  [{ color: [] }, { background: [] }],
  [{ list: "ordered" }, { list: "bullet" }, { align: [] }],
  ["link"]
];

// Quill: Modules
const modules = ref([
  {
    name: "blotFormatter",
    module: BlotFormatter,
    options: {
      /* options */
    }
  }
]);

// Quill: Quill Blot Formatter
Quill.register("modules/blotFormatter", BlotFormatter);

// Quill: Inline Style
Quill.register(Quill.import("attributors/class/align"), true);
Quill.register(Quill.import("attributors/class/font"), true);
Quill.register(Quill.import("attributors/style/align"), true);
Quill.register(Quill.import("attributors/style/font"), true);

In the quill-blot-formatter.d.ts file (if you are using TypeScript): declare module "quill-blot-formatter/dist/BlotFormatter";

The above code worked for me, so perhaps you can give it a try.

thanks bro, it's also worked for me

[andasilva]

I've tried to import like that:
import BlotFormatter from "quill-blot-formatter/dist/BlotFormatter";
but I get another console error:
TypeError: p is not a constructor

So I investigate and found another solution:

1. Use import from the index:
   import BlotFormatter from "quill-blot-formatter";
2. Add guill-blot-formatter in the optimizeDeps (vite.config.ts):
   Example of my vite.config.ts

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  optimizeDeps: {
    include: ["quill-blot-formatter"],
  },
});

With this config, all was working. I Hope it can help others too.

[NghiaLam11]

I've tried to import like that: import BlotFormatter from "quill-blot-formatter/dist/BlotFormatter"; but I get another console error: TypeError: p is not a constructor

So I investigate and found another solution:

1. Use import from the index:
   import BlotFormatter from "quill-blot-formatter";
2. Add guill-blot-formatter in the optimizeDeps (vite.config.ts):
   Example of my vite.config.ts

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  optimizeDeps: {
    include: ["quill-blot-formatter"],
  },
});

With this config, all was working. I Hope it can help others too.

Yeah 💯 ! Thank you very much. It worked

[yohames]

I've tried to import like that: import BlotFormatter from "quill-blot-formatter/dist/BlotFormatter"; but I get another console error: TypeError: p is not a constructor

So I investigate and found another solution:

1. Use import from the index:
   import BlotFormatter from "quill-blot-formatter";
2. Add guill-blot-formatter in the optimizeDeps (vite.config.ts):
   Example of my vite.config.ts

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  optimizeDeps: {
    include: ["quill-blot-formatter"],
  },
});

With this config, all was working. I Hope it can help others too.

It does work, but you have to import import BlotFormatter from "quill-blot-formatter/dist/BlotFormatter"; in Nuxt 3

[ravi-ranjan-bb]

I am also getting the same issue with the integration of htmlEditButton in reactQuill

super expression must either be null or a function, not undefined

I am working on a React project with a rich text editor using ReactQuill. Everything works fine in development mode (local), but after the build it is failing

This error seems to be related to the inclusion of the htmlEditButton module. When I remove the htmlEditButton module, the build works fine.

import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import '../quillStyles.css';
import htmlEditButton from 'quill-html-edit-button';

Quill.register('modules/htmlEditButton', htmlEditButton);