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

[dannickstark]

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

[srivatsan2607]

Hi, I am getting the same error as well. Any luck in finding the solution? It was not happening with grapesjs previous version.

[dannickstark]

Hi, I am getting the same error as well. Any luck in finding the solution? It was not happening with grapesjs previous version.

I didn't find any solution

[srivatsan2607]

Oh okay, any workaround that can be done?

[allamo123]

npm i grapesjs@0.17.4 i hope these solve the proplem

[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
    });

[handhikadj]

getting this issue on v0.20.4. showing TypeError: Cannot assign to read only property 'defaults' of object '[object Object] on Chrome

[jaywilburn]

Is this still a problem for anyone? Did anyone find a workaround for it? If you ended up removing this, what was your alternative?

[shadab97]

still same issue

bundle.js:10 Uncaught TypeError: Cannot set property defaults of #<e> which has only a getter

with "grapesjs": "^0.21.13", "grapesjs-blocks-basic": "^1.0.2", "grapesjs-blocks-bootstrap4": "^0.2.3"

[kaoz70]

Could you please see if v0.2.5 fixes this?