Quill + Typescript+ Webpack 4 doesn't work

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

Steps for Reproduction

1. Load Quill:
   import {Quill} from "quill";
2. 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'
        });

1. 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.

[sam-s4s]

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';

[marcj]

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.