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
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.