Quill: Mix of imports and module.export webpack failure

[srossross-tableau]

[Describe the issue]

Quill is currently mixing import statements with module.export = assignment statements.

This looks like this is no longer supported by webpack.

a7a4184

detect harmony modules before parsing
exports is now undefined in ESM
module.exports is now read-only in ESM and returns undefined
define is now undefined in ESM

The error returned in the browser is

Cannot assign to read only property 'exports' of object '#<Object>' (mix require and export)

Steps for Reproduction

1. Bundle quill with the latest version of webpack.

Expected behavior:

import ...
export default Quill 

-- or --

... = require(...) 
module.exports = Quill 

Actual behavior:

import ...
module.exports = Quill;

Platforms:

webback bundling

Version:

1.2.0

[jhchen]

Can you clarify the steps for reproduction? Are you building just Quill for development? Are you building Quill as part of a larger build pipeline?

[srossross-tableau]

I am building quill as a part of a larger build pipeline. When I import Quill from 'quill' I get this runtime error.

Cannot assign to read only property 'exports' of object '#<Object>' (mix require and export)

It looks like only quill/core.js and quill/quill.js use module.exports =

Right now I can get around this by using import Quill from 'quill/core/quill'

[jhchen]

Quill has a webpack example as for building as part of a larger pipeline. It uses the latest version of webpack which is 2.2.1 at the moment and it builds and runs with no errors.

Quill uses module.exports = Quill in one place because we want people to be able to drop it into a website and use it immediately without involving a build (ie including quill.js will assign to window.Quill). If there is a way to keep this benefit while removing the error for you please advise. Otherwise please look at the differences between the example webpack config and your build config and resolve the relevant differences.

[srossross-tableau]

Thanks @jhchen, will do. I will also try to provide a sample webpack config to reproduce.

[mnquintana]

@jhchen We're still running into this with webpack 2.6.1 - it looks like the culprit is the combination of Webpack 2, mixing import and module.exports in those Quill source files, and disabling module transpilation in our .babelrc:

{
    "presets": [
        ["es2015", {
            "modules": false
        }],
        "es2016",
        "es2017",
        "react"
    ]
}

From what I can tell, this means that Quill is compatible with Webpack 2, but not with tree shaking in Webpack 2 (since that requires that imports and exports passthrough unchanged to Webpack).

Quill uses module.exports = Quill in one place because we want people to be able to drop it into a website and use it immediately without involving a build

I'm not sure I follow - do you mean that Quill's prebuilt dist's global fallback works with CommonJS exports, but not ES2015 exports?

[jhchen]

It means you should be able to do this:

<script src="https://cdn.quilljs.com/1.2.6/quill.js"></script>
<script>
  var quill = new Quill('#container');
</script>

My understanding is you would have to do var quill = new Quill.default('#container'); if you use the ES6 style export.

Now if you have your own build pipeline, you will likely have your own entry file in which you can export however you want for your app and take advantage of tree-shaking. But for the prebuilt cdn files, I expect users to want to drop it into a <script> and have new Quill just work.

[azazel75]

i'm bitten by this bug too using 3.4.1

[azazel75]

That module.exports = Quill; seems completely wrong to me. What does it matter the fact about running it inside the web page without a packaging step? That 'quill.js' from cdn is pre-packaged, containing all quill and its dependencies. Here the problem is that you do do pre-packaging not with webpack but with something else which is more permissive about your coding....
What a mess

[koffeinfrei]

you can only use ES6 exports with ES6 modules. There's no more mixing ES5/ES6 syntax.

https://github.com/webpack/webpack/issues/3997#issuecomment-273473184

I strongly believe that the new ES6 syntax should be used.

Following the documentation http://quilljs.com/guides/adding-quill-to-your-build-pipeline/ fails for a standard es6 webpack setup.

For @jhchen's drop-in example the packaged version is used anyway.

[azazel75]

@koffeinfrei I ended up implementing @srossross-tableau suggestion of avoiding importing core.js totally and just reimplementing it in my code using import Quill from 'quill/core/quill' and setting it up on my own.