Run Quill editor with TypeScript

Question

How can I get the Quill editor running in TypeScript?

I have a working example of the WYSIWYG-editor Quill from the Quill site. The following code just has to be copied into an HTML file such as example.html and there will be a simple text editor example:

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

Now I am trying to get this example running in TypeScript. The first thing would be to install quill and then install the types for TypeScript which should be @types/quill. Adding them in the package.json file and running yarn or npm loads the classes:

"dependencies": {
    "@types/jquery": "3.3.31",
    "@types/quill": "^2.0.3",
    "@types/react": "16.9.11",
    "@types/react-dom": "16.9.4",
    "@types/react-router-dom": "5.1.2",
    "bootstrap": "4.3.1",
    "jquery": "3.4.1",
    "popper.js": "1.16.0",
    "quill": "^1.3.7",
    "react": "16.11.0",
    "react-dom": "16.11.0",
    "react-router-dom": "5.1.2",
},

But when running the example with the webpack-dev-server I get an error. The command is:

"scripts": {
    "develop": "webpack-dev-server --mode development --open --port 8081 --host 0.0.0.0 --config webpack.dev.config.js"
}

The error is:

ERROR in [at-loader] ./node_modules/@types/quill/node_modules/quill-delta/dist/Delta.d.ts:1:8 
    TS1259: Module '"/home/myuser/Documents/quill-example/node_modules/@types/quill/node_modules/fast-diff/diff"' can only be default-imported using the 'esModuleInterop' flag

I suppose there is something wrong with the @types/quill package, right? But what is exactly failing? What is the esModuleInterop doing exactly? Is there any fix to this error?

I could not find any Quill TypeScript example. It should be fairly easy to get it running in TypeScript, right?

[esModuleInterop info here](https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file). Does it work if you set that flag to `true` in tsconfig? — Alex Wayne, Mar 16 '20 at 06:57
@AlexWayne Ok, it did work. But I did not fully understand what `esModuleInterop` does. It influences the way that TypeScript handles the imports, right? It changes the asterisk-handling, right? But what is that for? — Socrates, Mar 16 '20 at 20:02

score 3 · Answer 1 · answered Mar 16 '20 at 20:27

Turn on esModuleInterop. You shouldn't have any problems from doing so.

Basically, there are two interfaces for import/export.

The CommonJS way: (this came first)

// a.js
module.exports = { foo: 'foo', bar: 'bar' }
exports.baz = 'baz'

// b.js
const { foo, bar, baz } = require('./a.js')

Note that the export is always a single whole object. module.exports is the value that can be require'd.

And the ES6 way: (the new and now recommended standard)

// a.js
export default { foo, bar }
export const baz = 'baz'

// b.js
import baz, { foo, bar } from './a'

Note that there are now named exports and default exports. An ES6 module does not have a single exported value, but can export many values (one of which is the default value). These differences make translating between these syntaxes a bit complicated.

The esModuleInterop compiler option allows you to use ES6 style import with CommonJS style module.exports, and vice versa.

Much deeper explanation here.

Also, this github issue seems to indicate that quill requires esModuleInterop to be turned on. Which is fine. It shouldn't cause you any problems.

It sounds like we are going the path of relying on people to follow Typescript's recommendation for turning on esModuleInterop so will not keep this PR open.

So they discussed not requiring it, decided against it, and closed the issue.

Run Quill editor with TypeScript

1 Answers1