ErrorTipo no capturado: No se pueden leer propiedades de undefined (leyendo 'Lienzo') mientras se arrastra un componente en el Panel del Gestor de Capas
Bajé a la v0.21.4 y ya no tengo el problema, así que solo ocurre en la última versión disponible.
Lee la respuesta completa abajo ↓Pregunta
Versión GrapesJS
- Confirmo que se debe usar la última versión de GrapesJS
¿Qué navegador usas?
Chrome v116.0.5845.97
Enlace de demo reproducible
https://grapesjs.com/demo.html
Describe el bicho
¿Cómo reproducir el bicho?
- Seleccionar cualquier componente del lienzo
- Abrir el Panel del Gestor de Capas
- Selecciona el primer componente "Sección"
- Usar la flecha para mover la sección y cambiar el orden
¿Cuál es el comportamiento esperado? La sección debería moverse a la nueva posición
¿Cuál es el comportamiento actual? La consola está lanzando un error Uncaught TypeError: No puede leer propiedades de undefined (leyendo 'Canvas') y Uncaught TypeError: No puede leer propiedades de undefined (leyendo 'método')
Si es necesario ejecutar algo de código para reproducir el error, pégalo aquí abajo: '''js Tu código aquí
! [imagen](https://github.com/GrapesJS/grapesjs/assets/144697108/1ec72b5f-c98a-4991-a140-b2fa65782a36)
### Código de conducta
- [X] Acepto seguir el Código de Conducta de este proyecto
Respuestas (4)
Bajé a la v0.21.4 y ya no tengo el problema, así que solo ocurre en la última versión disponible.
Tengo el mismo problema en los ejemplos más sencillos. Hacer downgrade a 0,4 hace que desaparezca. ¿Regresión?
Sí, ya está arreglado aquí. Voy a posponer un nuevo lanzamiento para finales de esta semana.
Gracias por informar de esto, @Sw33tgt.
Buena pregunta sobre Uncaught TypeError: No se pueden leer propiedades de undefined (leyendo 'Lienzo') mientras arrastras un componente en el Panel del Gestor de Capas. El enfoque recomendado con Canvas 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 #3794
RTE Texto superpuesto en un componente de texto básico cuando el ancho y la altura son el 100% del lienzo
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión 93.0.4577.82 (Versión oficial) (6...
Issue #5584
el evento "storage:end:load" no se activa cuando todos los componentes están montados en el lienzo
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v91 Enlace de demo reproducible ht...
Issue #5355
En la capa de movimiento
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome 116 Enlace de demo reproducible ht...
Issue #5905
No se puede volver a abrir la configuración de componentes, después de hacer clic en componente y luego en Bloques
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Ópera 10.0.5130.23 | Linux Enlace de demo...
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.