quill: Quill + Typescript+ Webpack 4 doesn't work

“Uncaught TypeError: o.Quill is not a constructor”

Steps for Reproduction

Load Quill:
import {Quill} from "quill";
Attempt to initialize Quill

this.quill = new Quill(this.editor, {
            modules: {
                toolbar: [
                    [{'header': [1, 2, 3, 4, 5, 6, false]}],
                    ['bold', 'italic', 'underline', 'strike'],
                    ['link', 'image', 'video'],
                    ['blockquote', 'code-block'],
                    [{'list': 'ordered'}, {'list': 'bullet'}],
                    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
                    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
                    [{'direction': 'rtl'}],                         // text direction
                    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
                    [{'font': []}],
                    [{'align': []}],
                    ['clean']                                         // remove formatting button
                ]
            },
            placeholder: 'Empty document...',
            theme: 'snow'  // or 'bubble'
        });

Observe error.

Expected behavior: Works normally

Actual behavior: Doesn’t work

Platforms: Typescript

Include browser, operating system and respective versions Latest Quill, Webpack and Typescript

Version: 1.3.6

Note: I did try some other hacky solutions mentioned in different issues but eventually ran into a parchment blot error that I couldn’t get past. My project originally was not Typescript and worked and I did a straight conversion from JS to TS. This appears to be a Typescript specific problem. Note 2: It does with with import Quill from 'quill'; and es2015 module but I can’t access the Delta class. Note 3: Got delta working with const Delta = Quill.import('delta');. This is a really terrible solution and needs fixed. I wasted a ton of time, this is extremely hacky.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15 (2 by maintainers)

Most upvoted comments

Does anyone know how to use Quill with Typescript?

I’ve tried about 10 different combinations of import and new and none of them have worked so far.

Angular 7, Webpack 4, Typescript 3, “quill”: “1.3.6”, “@types/quill”: “1.3.10”

You should just be able to say…

import { Quill } from 'quill';
...
myQuill = new Quill('#quill');

However this does not work (TypeError: Quill__WEBPACK_IMPORTED_MODULE_8__.Quill is not a constructor).

-UPDATE-

Oh there’s a default export, so the following works 😄

import Quill from 'quill';

sam-s4s on Mar 8, 2019

Does this work?

import * as Quill from "quill";
this.quill = new Quill(...)

pthoren on Apr 8, 2018

Ref to the lib import

Note if using ts you will need to also download @types/quill

import Quill, { QuillOptionsStatic } from ‘quill’

Adding ref the CSS

import ‘quill/dist/quill.snow.css’

Adding the JS code to make it work

Special note, I am using react, where _rtfRef.current is of type HTMLDivElement which extends Element

var quillOptions: QuillOptionsStatic = {
    debug: 'info',
    placeholder: 'Compose an epic...',
    readOnly: false,
    theme: 'snow'
};
new Quill(_rtfRef.current, quillOptions)

hopes this helps someone out here!

felipedferreira on Jul 30, 2021

Indeed, the given typings in @typings/quill are made for quill/quill.js, but in the distributed package you get from npm the quill/package.json refers as main the dist file dist/quill.js, which has a entirely different API.

So the issue is that Typescript/node imports dist/quill.js for import * as q from 'quill'; but the typings for that import path given from @typings/quill describe a different API.

You can work around that using

import * as quill from "quill";

class MyComponent {
    public quill?: quill.Quill;

    ngOnViewInit {
        this.quill = new (quill as any)(this.editor!.nativeElement);
    }
}

which is obviously a terrible hack. I’m not sure why Quill developers provide official typings for the development version of Quill, and not the linked distributed one, which every module resolver uses, but that is obviously wrong. So either link in main the one for the given typings, e.g. "main": "quill.js", or adjust the dist/quill.jsso the typings fit.

marcj on Sep 15, 2019

Try this:

    import * as quill from "quill";
    const Quill = quill.default || quill;

omerson on Jul 9, 2019

Once again, if you were to reference my previous comment or the documentation, you would see that if using a build system of your own, you should probably be building from source using the quill/core or quill/quill entry.

An example from our code base https://github.com/vanilla/vanilla/blob/release/2.8.dev.4/plugins/rich-editor/src/scripts/quill/Formatter.ts#L7

charrondev on Dec 5, 2018

I have had the same problem…

import {Quill} from "quill"

Use this way, the Quill is undefined.

I changed the way.

import * as Q from 'quill'
const Quill: any = Q

versions:

"quill": "^1.3.6",
"@types/quill": "^2.0.1"

It’s working~. Project address: https://github.com/xpioneer/react-typescript Hope can help you.

xpioneer on Dec 5, 2018