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

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

[BenGeordie]

Seems like the class Quill is the default export of "quill", so this worked for me:

import Quill from "quill";
var quill = new Quill('#editor', {
    theme: 'snow',
});

[felipedferreira]

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!

[carepollo]

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!

this worked for me as well.

[Lyfei]

Does this work?

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

It worked. I don't think I know much about js yet

[benbro]

Duplicate https://github.com/quilljs/quill/issues/3497