JSON.stringify(this.editor.getComponents()) Error
Same error here ... do you have a solution? [EDIT] Downgrading seems to be the only solution for now
Read full answer below โQuestion
Version: 0.16.44
Hi there! I have remote storage for pages, and recently I faced an issue when saving page, JSON.stringify(editor.getComponents()) started to throw error Uncaught TypeError: e[M].getId is not a function.
I investigated the already saved JSON representation of the page and found out that it fails on this part
[
{
"tagName": "form",
"type": "form",
"attributes": {
"method": "POST",
"id": "form-id"
},
"components": [],
"__symbol": "if5s0j"
}
]
I don't know what's the purpose of the __symbol key, but without it, everything works fine.
This issue occurs only on few pages, but I'm afraid that it might happen again on other pages.
Answers (4)
Same error here ... do you have a solution?
[EDIT] Downgrading seems to be the only solution for now
Same problem here, if I preprocess the components and remove that attribute (__symbol) before load the Editor the template works fine.
Is the a way @artf to disable the symbols for now?
Yeah unfortunately the previous version of grapesjs had a bug that created symbols involuntary. In the current version, the bug is fixed and symbols are disabled, but unfortunately, this still happens if you try to load a component with a saved symbol reference (created by the bug).
I'll add a patch for this issue in the next release, for now, I'd follow Josรจ's advice and remove all __symbol references before loading the editor.
Thanks for reporting this, @mmotov.
The error **TypeError: e[M].getId is not a function`. ** occurs when ProseMirror attempts to access properties before the component lifecycle is fully initialized. This is a common race condition in GrapesJS.
Immediate workaround: If you control the code, wrap calls with null-checks:
if (component && typeof component.getComponents === 'function') {
// your code
}
Root cause analysis:
The ProseMirror doesn't validate state before invoking getComponents(). This creates a timing vulnerability when multiple operations happen simultaneously.
Next steps:
- Try the null-guard workaround above
- Update to the latest GrapesJS โ many race conditions have been fixed
- If this persists, share your exact reproduction steps with the team
- Consider adding defensive checks in your own component initialization
This is actively being tracked and should be improved in upcoming releases.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3731
Text element not able to be selected twice after extended with events
Version: 0.17.25 Are you able to reproduce the bug from the demo?[ ] Yes[x] No What is the expected behavior? Update a existing component o...
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 #4416
Can't parse trait values using Template literals(String Interpolation)
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v103.0.5060.53 Reproducible demo li...
Issue #3575
grapes.min.js:2 Uncaught TypeError: Cannot read property 'length' of undefined
I got this error when add the <iframe src="https://app.conversiobot.com/boot/fvMEvO" width="100%" height="500" frameBorder="0" allow="geolo...
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.