Quill.register is not recognized as a function

Question

I have this Angular project which uses ngx-quill and I want to add the third party module, quill-blot-formatter to it.

I have installed @types/quill as a dev dependency to get rid of the TS linter errors and configured tsconfig.json to include "esModuleInterop": true and "allowSyntheticDefaultImports": true.

I have also added quill.js to angular.json as follows:

"scripts": [
   "./node_modules/quill/dist/quill.min.js"
]

I am trying to register the module in app.module.ts but I get the following error on the browser console.

quill.js:1122 Uncaught TypeError: Cannot read property 'register' of undefined

This is my module registration code:

import Quill from 'quill';
import { BlotFormatter } from 'quill-blot-formatter';

Quill.register('modules/blotFormatter', BlotFormatter);

I have tried importing Quill in various ways (* as Quill, * as QuillNamespace) but nothing works.

Any help would be appreciated.

Answer 1

I solved the issue by changing this:

import { BlotFormatter } from 'quill-blot-formatter';

to this:

import BlotFormatter from 'quill-blot-formatter';

Apparently I didnt read the documentation properly :)

Answer 2

try import Quill like this:

const Quill = require('quill')

Answer 3

From the documentation Github

// from the index, which exports a lot of useful modules
import BlotFormatter from 'quill-blot-formatter';

// or, from each individual module
import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';

Individual module import helped me to solve the issue
Issue: (Uncaught TypeError: Cannot read property 'register' of undefined).