Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión 1.56.20 Chromium: 115.0.5790.171 (Versión Offizieller) (arm64) Enlace de demo reproducible ninguno Describe el bicho Tengo un tipo de componente con un script Al previsualizar un proyecto usando un componente de este tipo, GrapesJS crea el siguiente HTML Si inspeccionas esta salida cuidadosamente, verás que el 'script () {' interno no está correctamente cerrado. Ya he intentado encontrar al...

Issue #5352💬 RespondidoAbierto el 31 de agosto de 2023por rozekReacciones 0

components bug question canvas typescript

Uncaught SyntaxError: Token inesperado '{' a las CanvasView.ts:590:12

Respuesta rápidapor rozek

Eso es interesante: definir una función separada y definiendo el tipo de componente tal y como se describe en la documentación Funciona tal y como está diseñado. Pero sigue sonando extraño que una función en línea produzca un error de sintaxis en el HTML exportado...

Lee la respuesta completa abajo ↓

Pregunta

Versión GrapesJS

Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

Versión 1.56.20 Chromium: 115.0.5790.171 (Versión Offizieller) (arm64)

Enlace de demo reproducible

ninguno

Describe el bicho

Tengo un tipo de componente con un script

      Editor.DomComponents.addType('HTMLView',{
        modelo: {
          Predeterminados: {
             script () { console.log('Hola!'); runScript.call(this) },
            ...

Al previsualizar un proyecto usando un componente de este tipo, GrapesJS crea el siguiente HTML

<div class="gjs-js-cont"><div data-id="ij6k"><script>
      setTimeout(function() {
        var item = document.getElementById('ij6k');
        si (!ítem) regresa;
        (función(){
script () {
              console.log('¡Hola!'); runScript.call(this)
;}. bind(elemento))({})
      }, 1);</script></div></div>

Si inspeccionas esta salida cuidadosamente, verás que el 'script () {' interno no está correctamente cerrado.

Ya he intentado encontrar algunas soluciones pero aún no lo he conseguido. Pero lo intentaré más porque este problema resulta ser un bloqueador...

Código de conducta

Acepto seguir el Código de Conducta de este proyecto

Respuestas (3)

rozek• 31 de agosto de 2023

Eso es interesante: definir una función separada

function script () { console.log('Hola!'); runScript.call(this) }

y definiendo el tipo de componente tal y como se describe en la documentación

      Editor.DomComponents.addType('HTMLView',{
        modelo: {
          Predeterminados: {
             guion,
            ...

Funciona tal y como está diseñado.

Pero sigue sonando extraño que una función en línea produzca un error de sintaxis en el HTML exportado...

artf• 3 de septiembre de 2023

@rozek buena observación, lo arreglará para la próxima versión

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @rozek.

El problema con Uncaught SyntaxError: Token inesperado '{' en CanvasView.ts:590:12 parece ser una condición de carrera o un problema de temporización de gestión de estado. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.

Qué probar:

Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);


2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos

3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
  Es seguro interactuar con el componente aquí
});

Recomendaciones de siguientes pasos:

Prueba con la última versión de GrapesJS si no lo has hecho
Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
Incluir errores de GrapesJS, de navegador y de consola en tu informe