ES6/Babel Class constructor cannot be invoked without 'new'

问题:

I'm trying to create a custom Quill theme, extending the bubble one. I'm facing a strange ES6 inheritance problem, where it seems I cannot call super() in my constructor. Here is my code:

import BubbleTheme, { BubbleTooltip } from 'quill/themes/bubble'  class LoopTheme extends BubbleTheme {   constructor (quill, options) {     super(quill, options)   }    extendToolbar (toolbar) {     super.extendToolbar(toolbar)     this.tooltip = new LoopTooltip(this.quill, this.options.bounds);     this.tooltip.root.appendChild(toolbar.container);   } }  class LoopTooltip extends BubbleTooltip {  }  LoopTooltip.TEMPLATE = [   '<span class="ql-tooltip-arrow"></span>',   '<div class="ql-tooltip-editor">',     '<input type="text" data-formula="e=mc^2" data-link="https://myurl.com" data-video="Embed URL">',     '<a class="ql-close"></a>',   '</div>' ].join('');  export { LoopTooltip, LoopTheme as default } 

Bubble theme could be found here

My Babel presets:

{     "presets": [         "es2015",         "es2016",         "stage-0",         "react"     ] } 

Webpack js file config:

  module: {     rules: [       {         test: /\.js$/,         include: [           resolve(__dirname, 'app')         ],         loader: 'babel-loader',         exclude: /node_modules/       }, {... 

Output generated code:

var LoopTheme = function (_BubbleTheme) {   _inherits(LoopTheme, _BubbleTheme);    function LoopTheme() {     _classCallCheck(this, LoopTheme);      return _possibleConstructorReturn(this, (LoopTheme.__proto__ || Object.getPrototypeOf(LoopTheme)).apply(this, arguments));   }    _createClass(LoopTheme, [{     key: 'extendToolbar',     value: function extendToolbar(toolbar) {       _get(LoopTheme.prototype.__proto__ || Object.getPrototypeOf(LoopTheme.prototype), 'extendToolbar', this).call(this, toolbar);       this.tooltip = new LoopTooltip(this.quill, this.options.bounds);       this.tooltip.root.appendChild(toolbar.container);     }   }]);    return LoopTheme; }(_bubble2.default);  var LoopTooltip = function (_BubbleTooltip) {   _inherits(LoopTooltip, _BubbleTooltip);    function LoopTooltip() {     _classCallCheck(this, LoopTooltip);      return _possibleConstructorReturn(this, (LoopTooltip.__proto__ || Object.getPrototypeOf(LoopTooltip)).apply(this, arguments));   }    return LoopTooltip; }(_bubble.BubbleTooltip);  LoopTooltip.TEMPLATE = ['<span class="ql-tooltip-arrow"></span>', '<div class="ql-tooltip-editor">', '<input type="text" data-formula="e=mc^2" data-link="myurl.com" data-video="Embed URL">', '<a class="ql-close"></a>', '</div>'].join('');  exports.LoopTooltip = LoopTooltip; exports.default = LoopTheme; 

I'm having the following error: events.js:59 Uncaught TypeError: Class constructor BubbleTheme cannot be invoked without 'new'. However, the LoopTheme is correctly called with new by Quill here. When I debug step by step, I correctly enter the LoopTheme constructor, and the error is raised when super is called.

Am I missing something here? I've always used inheritance, and I use it elsewhere in my code (between my classes), where here am I having trouble?

Thanks for your help

回答1:

I ran into the exact same issue while extending Quill’s BaseTheme.

As Bergi correctly pointed out in the comments above, this has to do with the fact that babel-loadernode_modules/, which is excluded.

You can either update the exclude option in your Webpack config and use a regex to skip the node_modules/quill/ folder or use include instead:

{   test: /\.js$/,   loader: 'babel-loader',   include: [     path.join(__dirname, '../src'), // + any other paths that need to be transpiled     /\/node_modules\/quill/,   ] } 

回答2:

You can also replace this:

import BubbleTheme from 'quill/themes/bubble' 

into this:

const BubbleTheme = Quill.import('themes/bubble') 

文章来源: ES6/Babel Class constructor cannot be invoked without 'new'