Editor crashes and template won’t load (TypeError reading type)
Please provide an isolated, reproducible demo cause that seems to come from your code logic and not related to the core
Read full answer below ↓Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome Version 143.0.7499.193
Reproducible demo link
Describe the bug
How to reproduce the bug?
- Open Rechat Studio editor and try to load/open this template: https://app.rechat.com/dashboard/marketing/history/Letter?printCampaignId=28f0587d-8738-4fd6-8087-da3167f6d737&action=edit 2. Wait for the editor to load the content. 3. The editor crashes and shows “Something went wrong”. 4. Open DevTools > Console and you can see the error: TypeError: Cannot read properties of undefined (reading 'type').
What is the expected behavior? The template should load normally in the Rechat editor
What is the current behavior?
The editor fails to load the template and crashes during render
If is necessary to execute some code in order to reproduce the bug, paste it here below:
<div id="ieplh" class="page">
<div class="bleed"></div>
<div class="safety"></div>
<div rechat-editable="true" id="igv6o" data-start-point-x="765" data-start-point-y="1025.9921875"
class="live-area"><br></div>
<div rechat-editable="true" id="ihlqh"></div><img data-type="image"
src="https://d1rchfjmtfqq3r.cloudfront.net/templates/assets/c33753b0-03ab-11f1-94e5-efea170aeede.png"
rechat-editable="true" id="ifnqx" width="140px" height="105px" data-start-point-x="164"
data-start-point-y="234.9921875" class="pure-img">
<div id="i2cur"></div>
<div id="ipi7d">
<div data-type="text" rechat-editable="tree" id="ij74a" data-start-point-x="263"
data-start-point-y="2.9921875"><b id="i5guj"><span id="imxwf"><span id="inwoa">Dear Friends, Clients
& Neighbors,<br><br>
As I was looking through these photos, from this past year, I realized how much the
different parts of my life are beautifully connected, and how grateful I am that so many of
you are part of that story.</span></span></b></div>
</div><img data-type="image"
src="https://d1rchfjmtfqq3r.cloudfront.net/templates/assets/82042a70-05fa-11f1-b2b4-efb3dbb2fd14.png"
rechat-editable="true" id="irey1" width="140px" height="186.66666666666666px" data-start-point-x="9"
data-start-point-y="26.9921875" class="pure-img">
<div id="i4oif">
<div data-type="text" rechat-editable="tree" id="imhqg" data-start-point-x="248"
data-start-point-y="28.9921875"><b id="i9b4y"><span id="ijd9g">The picture to the right is from my
"elementary" school reunion in Houston at St. Annes. Standing there with friends I grew up
with, reminded me that home isn't just a place, it's where our stories begin.</span></b></div>
</div>
<div id="ivhv7">
<div data-type="text" rechat-editable="tree" id="itnxl" data-start-point-x="2"
data-start-point-y="3.9921875"><span id="ipxqy"><b id="im445">A favorite kind of moment, a simple one at
home, in pajamas reading to my grandbabies. This picture reminds me why what we do matters so
much.Home is where we feel safe, loved & completely ourselves.</b></span></div>
</div>
<div data-block="text" data-is-placeholder-block="false" id="i1ar9"></div>
<div id="iixqk">
<div data-type="text" rechat-editable="tree" id="ilzh3" data-start-point-x="155"
data-start-point-y="74.9921875"><span id="ihavs">This photo captures a joyful bridal shower with friends
and clients that become family. Moments like these mean so much to me, sharing special times as we
go through life.</span></div>
</div>
<div id="ik00a">
<div data-type="text" rechat-editable="tree" id="ibnjg"><span id="iou0n"><b id="i046k">From my heart and my
home to yours, thank you for being part of my life and my business. I look forward to many more
memories ahead.</b></span></div>
</div>
<div data-block="text" data-is-placeholder-block="false" id="i7fad"></div>
<div id="io9pb">
<div data-type="text" rechat-editable="tree" id="ik0mo" data-start-point-x="3"
data-start-point-y="5.9921875"><span id="ifevo"></span></div>
</div><img data-type="image"
src="https://d1rchfjmtfqq3r.cloudfront.net/templates/assets/cd4de6a0-06c3-11f1-9a62-c34eb0eb416a.png"
rechat-editable="true" id="ivwsq" width="140px" height="186.66666666666666px" data-start-point-x="4"
data-start-point-y="33.9921875" class="pure-img">
<div id="irm8p">
<div data-type="text" rechat-editable="tree" id="iyq1t" data-start-point-x="163"
data-start-point-y="23.9921875"><span id="iqt1b"><b id="ik6gg"><em id="imyso">"The kindest gift I can
receive is a referral from my clients & friends."</em></b></span></div>
</div>
<div id="iu47h">
<div data-type="text" rechat-editable="tree" id="i5wdg" data-start-point-x="15"
data-start-point-y="59.9921875"><b style="font-weight:bold;"><span style="font-family:'Butler';">With
Gratitude</span>,</b><br>
<br>
<br>
<b style="font-weight:bold;"><span style="font-family:'Butler';">Mary Grilliette<br>
210.355.1313<br>
[email protected]</span></b>
</div>
</div>
</div><br id="i57i6"><br id="ijfhr"><br id="iowdb">
### Code of Conduct
- [x] I agree to follow this project's Code of ConductAnswers (2)
Please provide an isolated, reproducible demo cause that seems to come from your code logic and not related to the core
Thanks for reporting this, @mehdimoslehi.
Great question about editor crashes and template won’t load (TypeError reading type). The recommended approach with StyleManager 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 #4010
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome / Firefox Reproducible demo link ht...
Issue #4859
Editing CSS property sets a style to a common class instead of element
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v108Reproducible demo link https://gr...
Issue #6369
Display order of border radius is not correct
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v130 Reproducible demo link https:/...
Issue #5263
Deleting a component without deleting its corresponding style, will adding new components later cause style conflicts?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest version of Chrome Reproducible demo...
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
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.