El editor se cierra y la plantilla no carga (tipo de lectura de error de tipo)
Por favor, proporciona una demo aislada y reproducible porque parece venir de la lógica de tu código y no está relacionada con el núcleo
Lee la respuesta completa abajo ↓Pregunta
Versión GrapesJS
- Confirmo que uso la última versión de GrapesJS
¿Qué navegador usas?
Versión de Chrome 143.0.7499.193
Enlace de demo reproducible
Describe el bicho
¿Cómo reproducir el bicho?
- Abre el editor de Rechat Studio e intenta cargar/abrir esta plantilla: https://app.rechat.com/dashboard/marketing/history/Letter?printCampaignId=28f0587d-8738-4fd6-8087-da3167f6d737&action=edit 2. Esperar a que el editor cargue el contenido. 3. El editor se bloquea y muestra "Algo salió mal". 4. Abre DevTools > Consola y puedes ver el error: TypeError: No se pueden leer propiedades de undefined (leyendo 'type').
¿Cuál es el comportamiento esperado? La plantilla debería cargarse normalmente en el editor de Rechat
¿Cuál es el comportamiento actual? El editor no carga la plantilla y se cierra durante el renderizado
Si es necesario ejecutar algo de código para reproducir el error, pégalo aquí abajo:
<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">Estimados amigos, clientes & Vecinos,<br><br> Mientras revisaba estas fotos, del año pasado, me di cuenta de cuánto diferentes partes de mi vida están bellamente conectadas, y lo agradecida que estoy de que tantos deEres parte de esa historia.</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">La imagen a la derecha es de mi
Reunión de "primaria" en Houston, en St. Annes. Allí de pie con amigos crecí
Me recordó que el hogar no es solo un lugar, es donde comienzan nuestras historias.</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">Un tipo de momento favorito, sencillo en
En casa, en pijama leyendo a mis nietos. Esta foto me recuerda por qué lo que hacemos es tan importante
mucho. El hogar es donde nos sentimos seguros, queridos y completamente nosotros mismos.</b></span></div>
</div>
<div data-block="text" data-isplaceholder-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">Esta foto captura una alegre despedida de soltera con amigos
y clientes que se convierten en familia. Momentos como estos significan mucho para mí, compartiendo momentos especiales mientras nosotros
Pasar por la vida.</span></div>
</div>
<div id="ik00a">
<div data-type="text" rechat-editable="tree" id="ibnjg"><span id="iou0n"><b id="i046k">Desde mi corazón y mi
Hogar a la tuya, gracias por formar parte de mi vida y de mi negocio. Espero muchas más
Recuerdos por delante.</b></span></div>
</div>
<div data-block="texto" data-isplaceholder-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">El regalo más amable que puedo
recibir es una recomendación de mis clientes y amigos."</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
Agradecimiento</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>
<br</div> id="i57i6"><br id="ijfhr"><br id="iowdb">
### Código de conducta
- [x] Acepto seguir el Código de Conducta de este proyectoRespuestas (2)
Por favor, proporciona una demo aislada y reproducible porque parece venir de la lógica de tu código y no está relacionada con el núcleo
Gracias por informar de esto, @mehdimoslehi.
Buena pregunta sobre fallos del editor y la plantilla no carga (TypeError reading type). El enfoque recomendado con StyleManager es usar la API orientada a eventos.
Empieza aquí:
- Consulta la documentación de GrapesJS de tu módulo específico
- Busca el método del oyente de eventos 'on()'
- La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes
Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));
Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));
**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #4191
Estamos intentando almacenar los datos del editor grapesJS en la aplicación Angular 10, obteniendo un error CORS, imagen adjunta abajo
Versión GrapesJS [x] Confirmo que uso la última versión de GrapesJS ¿Qué navegador usas? Chrome 99.0.4844.5 Enlace de demo reproducible htt...
Issue #4010
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome / Firefox Enlace de demo reproduci...
Issue #4208
Error de estado de clic de estilo en todos los elementos
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Brave Last, probado en Chrome Last y Safa...
Issue #4187
El método Editor Destroy genera un error en React
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome 98 Enlace de demo reproducible htt...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.