Component.get('traits').clone() is no longer available.
If you need to make a copy of traits I'd suggest simply doing this JSON.parse(JSON.stringify(editor.getSelected().getTraits())). I don't remember ever mentioning cloning traits in docs, so I'd avoid using non-public APIs.
Read full answer below βQuestion
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Arc Version 1.35.0 / Chromium Engine 123.0
Reproducible demo link
https://grapesjs.com/demo.html
Describe the bug
How to reproduce the bug?
- Open dev tools
- Select a component
- Run in console:
const selectedComponent = editor.getSelected();
selectedComponent.get('traits').clone();
What is the expected behavior? Should return cloned version.
What is the current behavior? Throws an error:
Traits.ts:29 Uncaught TypeError: Cannot read properties of undefined (reading 'Traits')
If is necessary to execute some code in order to reproduce the bug, paste it here below:
const selectedComponent = editor.getSelected();
selectedComponent.get('traits').clone();
Note: .clone() is the only method I found that no longer works. Link to the method - https://arc.net/l/quote/ztapwusb
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (2)
If you need to make a copy of traits I'd suggest simply doing this JSON.parse(JSON.stringify(editor.getSelected().getTraits())).
I don't remember ever mentioning cloning traits in docs, so I'd avoid using non-public APIs.
Thanks for reporting this, @ctrhub.
Great question about component.get('traits').clone() is no longer available.. The recommended approach with Components is to use the event-driven API.
Start here:
- Check the GrapesJS documentation for your specific module
- Look for the
on()event listener method - Most operations can be achieved by listening to editor and component events
Common patterns:
// Listen for changes
editor.on('change', () => console.log('something changed'));
// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));
If you're still stuck:
- Share a minimal CodeSandbox reproduction
- Include what you've already tried
- Mention your GrapesJS version
- The community is here to help!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5378
Uncaught TypeError: Cannot read properties of undefined (reading 'Canvas') while dragging a component in Layer Manager Panel
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v116.0.5845.97 Reproducible demo li...
Issue #4803
Traits value type select doesn't fill value
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 108 Reproducible demo link https://...
Issue #5342
scrollCanvas doens't work
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 116.0.3 Reproducible demo link htt...
Issue #6152
CSS added via custom code persists after custom code component is removed
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? any Reproducible demo link https://grapesj...
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.