Quill: 1.3.6 'isBuffer is not a function' when minified

[timothyallan]

I'm encountering an issue which only occurs on a uglified/minified production build, and only with version 1.3.6. Version 1.3.5 works great.

I've traced it down to a clone function in quill.core.js in the 1.3.6 build which dies on line 3948.

} else if (useBuffer && Buffer.isBuffer(parent)) {

in the minified code it looks like:

else { if (m && t.isBuffer(r))

with the error Uncaught TypeError: t.isBuffer is not a function

Now, I'm not entirely sure what the deal is! This is on a large project, with a bunch of dependencies, and this latest update of 1.3.6 is the only thing that has an issue. If I roll back to 1.3.5, everything works. It doesn't look like this area of code was touched at all according to the change log either.

There are no compile errors at all! The only reason I found this was a few customer emails saying that things died when they open up the rich text editor.

Any suggestions?

[jhchen]

Can you post a stack trace? Also are you building Quill yourself or using cdn.quilljs.com/{version}/quill.min.js?

[timothyallan]

I'm using React Quill https://github.com/zenoamaro/react-quill and running it through webpack/uglify for production builds.
Will get a stack trace asap.

[timothyallan]

The stack trace is as follows, line numbers are correct, and I've put the actual lines from the .map file beside the error as the variable names are minified.

quill.js:3948 Uncaught TypeError: Buffer.isBuffer is not a function
    at p (quill.js:3948)  } else if (useBuffer && Buffer.isBuffer(parent)) {
    at n (quill.js:4038)   return _clone(parent, depth);
    at e.value (quill.js:3194)  var args = [_emitter4.default.events.SELECTION_CHANGE, (0, _clone2.default)(this.lastRange), (0, _clone2.default)(oldRange), source];
    at new e (quill.js:2839)  this.update(_emitter4.default.sources.SILENT);
    at new e (quill.js:1108)  this.selection = new _selection2.default(this.scroll, this.emitter);
    at Object.createEditor (mixin.js:12) var editor = new Quill($el, config);

[jhchen]

Does your application or browser extensions use some polyfill for Buffer or define it globally? The issue seems to be Buffer is defined but it is not the expected Buffer

[timothyallan]

Nope, I've got nothing using any sort of Buffer as far as I know. It's a regular webpack'd React web app with nothing really out of the ordinary. Not using Node either, in case there was some accidental Node Buffer confusion somewhere.

I had clients reporting the issue, so it is very likely to not be a browser extension.

Why would 1.3.5, and earlier, work great? Was the buffer check added in 1.3.6?

[timothyallan]

Interesting... console.logging Buffer at the line where it fails in quill.js gives me

typeof Buffer object
Buffer = Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

If I log it from the context of my React component, I get

typeof Buffer function
Buffer = ƒ i(e,t,n){if(!(i.TYPED_ARRAY_SUPPORT||this instanceof i))return new i(e,t,n);if("number"==typeof e){if("string"==typeof t)throw new Error("If encoding is specified then the first argument must be a st…

Which I'm assuming is correct...

Edit: Changing line 3906 to
var useBuffer = typeof Buffer != 'undefined' && typeof Buffer === 'function'; bandaids the issue, but doesn't explain how Buffer gets magically turned into an object somehow in 1.3.6

[timothyallan]

So for anyone else getting this. The issue seems to be an incompatibility with something in Quill 1.3.6 and the default UglifyJSPlugin included with Webpack 3. I've been compiling this project for 2 years using over 50+ dependancies and this never happened!

To fix it, I overrode the default webpack UglifyJS version with the updated one as explained here https://github.com/webpack-contrib/uglifyjs-webpack-plugin and no longer got the Buffer issue on production builds.

[jhchen]

I overrode the default webpack UglifyJS version with the updated one as explained here https://github.com/webpack-contrib/uglifyjs-webpack-plugin

What's the default one and updated one? UglifyJS is something we would like Quill users to be able to use.

[timothyallan]

All the info is in the second sentence of the readme: "webpack =< v3.0.0 currently contains v0.4.6 of this plugin under webpack.optimize.UglifyJsPlugin as an alias. For usage of the latest version (v1.0.0), please follow the instructions below"

edit: the "conditionals" flag in UglifyJS seems to be the root cause of the issue if people don't want to update. But then that removes that conditional optimization feature for every one of your dependancies, just to work around Quill > 1.3.5

[paullaros]

Added this to my webpack config as a workaround:

module: { noParse: /node_modules\/quill\/dist\/quill.js/ }

[fedorenko]

I had the same problem with my production bundle, and none of the previous recommendations has helped to solve it.

So I ended up with using the default UglifyJS plugin and setting the "reduce_vars" flag in the options to false:

uglify: {
    compress: {
        reduce_vars: false,
    },
},

Package versions I used:

[email protected]
[email protected]
[email protected]

It's worked for me, hope it will help.