Trait add/remove can fail because collection type is inconsistent
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Brave Version 1.31.88 Chromium: 95.0.4638.69 (Official Build) (64-bit) on Linux
Reproducible demo link
https://jsfiddle.net/0a3o7cL6/
Describe the bug
Methods which operate on a component's trait collection (e.g. addTrait and removeTrait) seem to always assume the collection will be the Backbone-derived collection type, however there are cases where it's a simple Array instead. The code then attempts to call methods which don't exist.
I'm not familiar enough with the codebase to say for certain whether the actual bug is get('traits') returning the inconsistent type or the calling methods not accounting for the mixed return type. I discovered this behavior in the Video component, which has its runtime trait overwriting, I'm unsure if any other components are affected.
The JSFiddle is basically taken from: https://github.com/artf/grapesjs/issues/1999
How to reproduce the bug?
- Add a call which adds a trait to a component (in
initor another callback) which has an unreliable trait collection type (Video confirmed) - Attempt to create an instance of that component
What is the expected behavior?
addTrait should not explode
What is the current behavior?
Uncaught TypeError: this.get(...).add is not a function
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (2)
Yeah, I'll fix it in the next release, thanks
Thanks for reporting this, @rakelley.
Security and dependency issues are important. The GrapesJS team actively works on keeping dependencies up-to-date.
For you right now:
- Run
npm audit fixto see available patches - Check for a newer GrapesJS version that may have already addressed this
- If available, test the latest stable release before upgrading
- If the vulnerability is critical,
npm audit fix --forceis an option, but test thoroughly
Understanding the risk:
- Review the specific vulnerability details on GitHub Security Advisories
- Not all high-severity issues affect your code path
- Some vulnerabilities only trigger under specific conditions
Staying current:
- Watch for new GrapesJS releases
- Subscribe to security notifications on the repo
- The team prioritizes security updates in their release cycle
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4440
Extending text component breaks textable blocks
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 102.0.5005.115 (Official Build) (64-...
Issue #4136
component.remove() in 'component:mount' does not remove the rendered view
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 98.0.4758.80 (Official Buil...
Issue #6211
Too much recursion
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 131.0.2 Reproducible demo link htt...
Issue #4752
Component with pointer-events: 'all' (except wrapper) or editable component are draggable & droppable to itself.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 107.0.5304.121 (Official Build) (arm6...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins โPremium plugins ship with support, regular updates, and production-ready features โ save days of integration work.
Browse premium plugins โRelated tutorials
In-depth guides on the same topic.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Tutorial
GJS Market 2.0 - Donations, Tracking, Labels and Better Product Discovery
Weโve rolled out a new set of GrapesJS marketplace updates across GJS Market, focused on improving how creators distribute products
Tutorial
Preset DevFuture 2.0 โ New Update Released
Preset continues evolving as a clean, production-ready starting point for building visual editors powered by GrapesJS
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.