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

[MatthewFrench]

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

[jhchen]

Please do not spam quilljs with duplicate issues. Once there is an official upgrade guide from 3 to 4 I will take a look at upgrading. If someone in the community is more adventurous feel free to submit a PR.

[pthoren]

Does this work?

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

[charrondev]

I'm quite unsure what your issue is here, as we recently underwent a webpack 3 -> 4 transition and are using Quill and parchment heavily in typescript, we however are not importing the prebuilt quill. If you already have a toolchain why not follow the guide here https://quilljs.com/guides/adding-quill-to-your-build-pipeline/ and use either the quill/quill or quill/core entrypoints. We have had no issues doing that, although we have our own quill type definition.

[xpioneer]

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.

[charrondev]

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

[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 :D

import Quill from 'quill';

[omerson]

Try this:

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

[JohnnyLuv]

Try this:
Adding Quill to Your Build Pipeline

[marcj]

I think that the typings are just plain wrong.

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