"Cannot set property defaults of #<n>" error while integrating GrapesJS-blocks-boostrap4 plugin

Hi there. I am trying to add grapesjs-blocks-bootstrap4 plugin in my grapesjs editor in reactjs. When I try adding it, I get the following error. TypeError: Cannot set property defaults of #<n> which has only a getter at eval (grapes.min.js?a826:2:1) at Module.It (grapes.min.js?a826:2:1) at Function.$ [as extend] (grapes.min.js?a826:2:1) at vr (grapesjs-blocks-bootstrap4.min.js?5902:11:1) at eval (grapesjs-blocks-bootstrap4.min.js?5902:11:1) at eval (grapes.min.js?a826:2:1)

I tried deleting the node modules and installing them again, but still had the same issue. Thank you for your help in advance.

[matthewmichel]

I’m also getting this issue

[chaegumi]

https://github.com/chaegumi/grapesjs-blocks-bootstrap4

Wrong code

domc.addType('alert', {
        model: textModel.extend({
            defaults: Object.assign({}, textModel.prototype.defaults, {
                'custom-name': 'Alert',
                tagName: 'div',
                classes: ['alert'],
                traits: [
                    {
                        type: 'class_select',
                        options: [
                            {value: '', name: 'None'},
                            ... contexts.map(function(v) { return {value: 'alert-'+v, name: capitalize(v)} })
                        ],
                        label: 'Context'
                    }
                ].concat(textModel.prototype.defaults.traits)
            })
        }, {
            isComponent(el) {
                if(el && el.classList && el.classList.contains('alert')) {
                    return {type: 'alert'};
                }
            }
        }),
        view: textView
    });

Correct code

    domc.addType('alert', {
        extend: 'text',
        model: {
            defaults: Object.assign({}, textModel.prototype.defaults, {
                'custom-name': 'Alert',
                tagName: 'div',
                classes: ['alert'],
                traits: [
                    {
                        type: 'class_select',
                        options: [
                            { value: '', name: 'None' },
                            ...contexts.map(function (v) { return { value: 'alert-' + v, name: capitalize(v) } })
                        ],
                        label: 'Context'
                    }
                ].concat(textModel.prototype.defaults.traits)
            })
        },
        isComponent(el) {
            if (el && el.classList && el.classList.contains('alert')) {
                return { type: 'alert' };
            }
        },
        view: textView
    });