TypeError: moduleClass is not a constructor [nextjs]

[TheDarkStrix]

Hey guys , I am trying to implement drop and paste , i basically want catch image and upload to cloud instead of using base64 .

The code below is my current implementation . But I get the error TypeError: moduleClass is not a constructor .

Not sure what is wrong.

Any help is very much appreciated, thanks.

Versions: "react-quill": "^2.0.0-beta.2", "quill": "^1.3.7", "quill-image-drop-and-paste": "^1.2.5",

@chenjuneking

import React, { useState, useRef, useEffect } from "react";

// KaTeX dependency
import katex from "katex";
import "katex/dist/katex.css";

// Quill dependency
const Quill =
  typeof window === "object" ? require("react-quill").Quill : () => false;
const ReactQuill =
  typeof window === "object" ? require("react-quill") : () => false;
import "react-quill/dist/quill.snow.css";
const QuillImageDropAndPaste =
  typeof window === "object"
    ? require("quill-image-drop-and-paste")
    : () => false;

// MathQuill dependency
import "jquery";
typeof window === "object"
  ? require("mathquill/build/mathquill.js")
  : () => false;
import "mathquill/build/mathquill.css";

const mathquill4quill =
  typeof window === "object" ? require("mathquill4quill") : () => false;
import "mathquill4quill/mathquill4quill.css";

//Global definition
if (typeof window !== "undefined") {
  window.Quill = Quill;
  window.katex = katex;
}

export default function QuillPage() {
  const [load, setLoad] = useState(true);
  const [value, setValue] = useState("");
  const quillRef = useRef();

  useEffect(() => {
    Quill.register("modules/imageDropAndPaste", QuillImageDropAndPaste);
    // window.Quill = Quill;
    window.katex = katex;

    const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill, katex });
    console.log(window);
    enableMathQuillFormulaAuthoring(
      quillRef.current.editor,
      {
        operators: [
          ["\\pm", "\\pm"],
          ["\\sqrt{x}", "\\sqrt"],
          ["\\sqrt[n]{x}", "\\nthroot"],
          ["\\frac{x}{y}", "\\frac"],
          ["\\sum^{s}_{x}{d}", "\\sum"],
          ["\\prod^{s}_{x}{d}", "\\prod"],
          ["\\coprod^{s}_{x}{d}", "\\coprod"],
          ["\\int^{s}_{x}{d}", "\\int"],
          ["\\binom{n}{k}", "\\binom"],
          ["\\log{x}", "\\log"],
        ],

        displayHistory: true, // defaults to false
        historyCacheKey: "__my_app_math_history_cachekey_", // optional
        historySize: 20, // optional (defaults to 10)
      },
      quillRef.current.options
    );
    setLoad(false);
  }, [quillRef]);

  useEffect(() => {
    console.log(value);
  }, [value]);

  const imageHandler = () => {
    console.log("image");
  };

  return (
    <>
      <ReactQuill
        ref={quillRef}
        modules={{
          formula: true,
          imageDropAndPaste: {
            handler: imageHandler(),
          },
          toolbar: [["formula", "image"]],
        }}
        theme="snow"
        value={value}
        onChange={setValue}
      />
    </>
  );
}

[chenjuneking]

had you tried import QuillImageDropAndPaste from "quill-image-drop-and-paste" ?

[TheDarkStrix]

Yes sir !

The same issue .

The only reason i used this is to make sure that this loads on frontend side rather than the backend side of things

const QuillImageDropAndPaste =
  typeof window === "object"
    ? require("quill-image-drop-and-paste")
    : () => false;

[chenjuneking]

@TheDarkStrix , try this:

const QuillImageDropAndPaste =
  typeof window === "object"
    ? require("quill-image-drop-and-paste").default
    : () => false;

[nmitra6]

Thanks Mr. Chen,

It’s working. My problem was with ImageData in custom handler, in Nuxt.js.

I solved it by,

const QuillImageData =

process.client

? require("quill-image-drop-and-paste").ImageData

: null;

USP of your module is added minification, Kindly upgrade to have a lower filesize after minification.

I see, how you solved the paste text problem. Very nice. TypeScript datatypes are also a good improvement.

Keep up the good work.

Thanks a lot.

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows

From: Jacket @.> Sent: 15 August 2021 20:28 To: @.> Cc: Nabendu @.>; @.> Subject: Re: [chenjuneking/quill-image-drop-and-paste] TypeError: moduleClass is not a constructor [nextjs] (#30)

@TheDarkStrixhttps://github.com/TheDarkStrix , try this:

const QuillImageDropAndPaste =

typeof window === "object"

? require("quill-image-drop-and-paste").default

: () => false;

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/chenjuneking/quill-image-drop-and-paste/issues/30#issuecomment-899063130, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABYH6D4PN4IIQD5DSBN33CLT47I2TANCNFSM5CE3U2BA. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email.

[chenjuneking]

Since this issue has been resolved, I closed it now. If you have any problem, feel free to let me know.