Uncaught TypeError: Super expression must either be null or a function

[artem-schander]

Uncaught TypeError: Super expression must either be null or a function

[Artem-Schander]

Hi @vanatvietcetera,

Thanks for raising the issue. I'll look into it as soon as possible.
In the meantime you could describe your scenario and how to reproduce the issue.

[Artem-Schander]

I can not reproduce this. Please provide more info.

[Artem-Schander]

closing due to inactivity

[benswinburne]

@Artem-Schander I get this error too. I doesn't seem to happen in development on CRA but in the production build I just discovered it. This is the line which is complaining

Which takes import clipboard as an argument

Which fits as if to say that the parent class clipboard is not being imported properly as one of the reasons for

Uncaught TypeError: Super expression must either be null or a function

appears to be missing parent class.

I haven't put together a demo to show this not working I've just turned off this plugin for now but in the mean time here's my editor component with some saving bits stripped out

import { useQuill } from 'react-quilljs';
import Quill from 'quill';
import 'quill-emoji';
import MagicUrl from 'quill-magic-url';
import MarkdownShortcuts from 'quill-markdown-shortcuts';
import QuillPasteSmart from 'quill-paste-smart';
import useUpdateEffect from 'use-update-effect';

Quill.register('modules/magicUrl', MagicUrl);
Quill.register('modules/markdownShortcuts', MarkdownShortcuts);
Quill.register('modules/clipboard', QuillPasteSmart, true);

const toolbarOptions = {
	container: [['bold', 'italic', 'link', 'emoji', 'clean']],
};

const formats = ['bold', 'italic', 'link', 'emoji'];
const modules = {
	'emoji-toolbar': true,
	'emoji-textarea': false,
	// 'emoji-shortname': true, // not working
	toolbar: toolbarOptions,
	magicUrl: true,
	markdownShortcuts: {},
};

export const TextAttachmentForm = ({text}) => {
	const { quill, quillRef } = useQuill({
		modules,
		formats,
		readOnly: true, // https://tinyurl.com/y2gmrzha
	});

	useUpdateEffect(() => {
		// const defaultMarkup = snarkdown(text || '');
		const defaultMarkup = text;
		quill.clipboard.dangerouslyPasteHTML(defaultMarkup);
		quill.enable(); // https://tinyurl.com/y2gmrzha
	}, [quill]);

	return (
		<div style={{ width: '100%' }}>
			<div ref={quillRef} />
		</div>
	);
};

export default TextAttachmentForm;

I will try and make a reproducible CSB tomorrow but that might prove difficult as it only happens in a production build of CRA for me. non ejected, standard CRA. yarn start doesn't show the error, yarn build and serve the output somehow does crash.

Let me know if I can provide any more information in the mean time.

[Artem-Schander]

@benswinburne
Thanks for the detailed comment. I'll try to reproduce it in a few hours.

[benswinburne]

@Artem-Schander here's a CSB but as expected it doesn't occur because its not minified

https://codesandbox.io/s/frosty-shamir-esdqo?fontsize=14&hidenavigation=1&theme=dark

If you export the CSB, then run

yarn; yarn build; yarn serve

Then open your browser you'll see the error. (I've only tried this in Chrome admittedly but given the type of error I'd expect whichever browser you use would show it)

[Artem-Schander]

@benswinburne
Thanks. I never worked wit CSB, so this is a nice start.
I'll run the build and see what i can do.

[Artem-Schander]

That was a tricky one.

Workaround for v1.1

import React from 'react';
import './styles.css';

import { useQuill } from 'react-quilljs';

import 'quill/dist/quill.snow.css';

const toolbarOptions = {
    container: [['bold', 'italic', 'link', 'clean']],
};

const formats = ['bold', 'italic', 'link'];
const modules = {
    toolbar: toolbarOptions,
};

export const TextAttachmentForm = ({ text }) => {
    const { quillRef, quill } = useQuill({
        modules,
        formats,
    });

    if (quill !== undefined && quill.register !== undefined) {
        const QuillPasteSmart = require('quill-paste-smart');
        quill.register('modules/clipboard', QuillPasteSmart, true);
    }

    return (
        <div style={{ width: '100%' }}>
            <div ref={quillRef} />
        </div>
    );
};

export default function App() {
    return (
        <div className="App">
            <h1>Hello CodeSandbox</h1>
            <h2>Start editing to see some magic happen!</h2>
            <div className="container">
                <TextAttachmentForm text="foo" />
            </div>
        </div>
    );
}

---

EDIT

Could you please update to v1.2 and check if it solves the issue.
As of this release it is no longer necessary to register the module manually.
The following code should work:

import React from "react";
import "./styles.css";

import "quill/dist/quill.snow.css";

import { useQuill } from "react-quilljs";
import "quill-paste-smart";

const modules = {
  toolbar: ["bold", "italic", "underline", "link", "clean"]
};

export const ReactQuill = ({ text }) => {
  const { quillRef } = useQuill({ modules });

  return (
    <div style={{ width: "100%" }}>
      <div ref={quillRef} />
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>react-quilljs + quill-paste-smart</h1>
      <h3>
        Paste some formatted HTML and see how everything except for the formats
        from the toolbar get stripped!
      </h3>
      <div className="container">
        <ReactQuill />
      </div>
    </div>
  );
}

[benswinburne]

@Artem-Schander fantastic thanks very much for looking into this and releasing 1.2. I've put upgrading into the backlog so i'll let you know if I have any issues when upgrading.