After GrapresJs Upgrae to v0.20.1 plugin not working

[Palash-Mandal]

Hello @Anubhav Thanks to nice plugin.

Right now I have faced issue after upgrading grapesjs to v0.20.1 the current on. Can you please help to solve the issue in where I have made the modification run the plugin again.

Uncaught TypeError: Cannot set property defaults of #<n> which has only a getter
    at grapesjs@latest:2:930538
    at Module.It (grapesjs@latest:2:930754)
    at Function.$ [as extend] (grapesjs@latest:2:30156)
    at eval (Accordion.js?57d5:8:1)
    at eval (index.js?2af9:22:1)
    at eval (index.js?b635:106:1)
    at grapesjs@latest:2:979994
    at Array.forEach (<anonymous>)
    at Object.init (grapesjs@latest:2:979845)
    at (index):27:32

I think this is occur for this latest release https://github.com/artf/grapesjs/releases
Please help so that I can make it workable again . I have update the model error is fixed but code not working

    **### Accordions.js**

export default (dc, { defaultModel, ...config }) => {
  const type = "accordions";
  const attrAccordions = config.attrAccordions;

  dc.addType(type, {

    isComponent(el) {
      if (el.hasAttribute && el.hasAttribute(attrAccordions)) {
        return { type };
      }
    },
    model: {
      defaults: {
        ...defaultModel.prototype.defaults,
        copyable: false,
        droppable: false,
        name: "Accordions",
        "attr-accordions": config.attrAccordions,
        "attr-accordion": config.attrAccordion,
        "attr-accordion-content": config.attrAccordionContent,
        "attr-accordion-container": config.attrAccordionContainer,
        "class-accordion-active": config.classAccordionActive,
        "selector-accordion": config.selectorAccordion,

        script() {
          var i;
          var el = this;
          var attrAccordions = "[" + "{[ attr-accordions ]}" + "]";
          var attrAccordion = "[" + "{[ attr-accordion ]}" + "]";
          var attrAccordionContent =
            "[" + "{[ attr-accordion-content ]}" + "]";
          var attrAccordionContainer =
            "[" + "{[ attr-accordion-container ]}" + "]";
          var classAccordionActive = "{[ class-accordion-active ]}";
          var selectorAccordion = "{[ selector-accordion ]}";
          var body = document.body;
          var matches =
            body.matchesSelector ||
            body.webkitMatchesSelector ||
            body.mozMatchesSelector ||
            body.msMatchesSelector;

          // var hideContents = () => {
          //   var accordionContents =
          //     el.querySelectorAll(attrAccordionContent) || [];
          //   if (accordionContents) {
          //     for (i = 0; i < accordionContents.length; i++) {
          //       accordionContents[i].style.display = "none";
          //     }
          //   }
          // };

          var activeAccordion = (accordionEl) => {
            var accordionContainers =
              el.querySelectorAll(attrAccordionContainer) || [];

            if (accordionContainer) {
              for (i = 0; i < accordionContainers.length; i++) {
                var accordionContainer = accordionContainers[i];
                var newClass = accordionContainer.className
                  .replace(classAccordionActive, "")
                  .trim();

                accordionContainer.className = newClass;
              }
            }

            // hideContents();
            accordionEl.className += " " + classAccordionActive;
          };

          var deactiveAccordion = (accordionEl) => {
            var newClass = accordionEl.className
              .replace(classAccordionActive, "")
              .trim();
            accordionEl.className = newClass;
          };

          el.addEventListener("click", (e) => {
            var target = e.target;
            if (matches.call(target, attrAccordion)) {
              if (
                el.querySelector(target.getAttribute(selectorAccordion)).style
                  .display === "block"
              ) {
                deactiveAccordion(target.parentElement);
                el.querySelector(
                  target.getAttribute(selectorAccordion)
                ).style.display = "none";
              } else {
                activeAccordion(target.parentElement);
                el.querySelector(
                  target.getAttribute(selectorAccordion)
                ).style.display = "block";
              }
            }
          });
        },
        ...config.accordionsProps,
      },

      init() {
        const attrs = this.getAttributes();
        attrs[config.attrAccordions] = 1;
        this.setAttributes(attrs);
      },

      __oninitview() {
        const comps = this.model.components();
        !comps.length && comps.add(config.template);
      },
    }
  });
};
```
`
    

### **AccordionContent.js**

`export default (dc, { defaultModel, ...config }) => {
  const type = "accordion-content";
  const attrKey = config.attrAccordionContent;
  const classKey = config.classAccordionContent;

  dc.addType(type, {
    isComponent(el) {
      if (el.hasAttribute && el.hasAttribute(attrKey)) {
        return { type };
      }
    },
    model: {
      defaults: {
        ...defaultModel.prototype.defaults,
        name: "Accordion Content",
        draggable: `[${config.attrAccordionContainer}]`,
        copyable: false,
        removable: false,
        selectable: true,
        ...config.accordionContentProps,
      },

      init() {
        const attrs = this.getAttributes();
        attrs[attrKey] = 1;
        this.setAttributes(attrs);
        classKey && this.addClass(classKey);
      },
    },
  });
};
`

### **AccordionContainer.js**

`export default (dc, { defaultModel, ...config }) => {
  const type = "accordion-container";
  const attrAccordions = config.attrAccordions;
  const attrKey = config.attrAccordionContainer;
  const classKey = config.classAccordionContainer;
  const attrAccordionContent = config.attrAccordionContent;
  const selectorAccordion = config.selectorAccordion;

  dc.addType(type, {
    isComponent(el) {
      if (el.hasAttribute && el.hasAttribute(attrKey)) {
        return { type };
      }
    },
    model: {
      defaults: {
        ...defaultModel.prototype.defaults,
        name: "Accordion Container",
        draggable: `[${attrAccordions}, ${attrAccordionContent}]`,
        droppable: false,
        copyable: true,
        removable: true,
        ...config.accordionContainerProps,
      },

      init() {
        const attrs = this.getAttributes();
        attrs[attrKey] = 1;
        this.setAttributes(attrs);
        classKey && this.addClass(classKey);
        this.listenTo(this, "add", this.onAdd);
      },

      onAdd() {
        const componentModels = this.components().models;
        if (componentModels && Array.isArray(componentModels)) {
          let accordionContentID;
          for (let i = componentModels.length - 1; i >= 0; i--) {
            const model = componentModels[i];
            const attrs = model.getAttributes();
            if (attrs[`${attrAccordionContent}`]) {
              accordionContentID = model.getId();
              model.setId(accordionContentID);
            } else {
              model.addAttributes({
                [selectorAccordion]: `#${accordionContentID}`,
              });
            }
          }
        }
      },
    },
    
  });
};
`

### **Accordion.js**

`export default (dc, { defaultModel, ...config }) => {
  const type = "accordion";
  const attrKey = config.attrAccordion;
  const classKey = config.classAccordion;
  const selectorAccordion = config.selectorAccordion;

  dc.addType(type, {
    isComponent(el) {
      if (el.hasAttribute && el.hasAttribute(attrKey)) {
        return { type };
      }
    },

    model: {
      defaults: {
        name: "Accordion",
        draggable: `[${config.attrAccordionContainer}]`,
        droppable: false,
        copyable: false,
        removable: false,
        selectable: false,
        ...config.accordionProps,
      },

      init() {
        const attrs = this.getAttributes();
        attrs[attrKey] = 1;
        this.setAttributes(attrs);
        classKey && this.addClass(classKey);
      },

      clone() {
        const cloned = defaultModel.prototype.clone.apply(this, arguments);
        cloned.addAttributes({ [selectorAccordion]: "" });
        return cloned;
      },
    },
  });
};
`
    
    
    

[mitcht]

Better late than never. Check out my pull request. I've found that refactoring these older grapesJS plugins isn't that hard. Too bad the developer of GrapesJS doesn't include backward compatiblity.

[snehlata08]

@mitcht i have tried your pull request but it still doesn't work. Below is the error I am getting
Uncaught TypeError: Cannot set property defaults of #<o> which has only a getter at grapes.min.js:2:355393 at Module.Vt (grapes.min.js:2:355609) at Function.q [as extend] (grapes.min.js:2:30147) at d (grapesjs-accordion.min.js:2:2579) at h (grapesjs-accordion.min.js:2:8639) at e.default (grapesjs-accordion.min.js:2:11793) at grapes.min.js:2:989344 at Array.forEach (<anonymous>) at Object.init (grapes.min.js:2:989283) at architecture-development/:179:24

I am using grapesjs version 0.21.11