No se pueden leer propiedades de undefined (leyendo 'uploadFile')
Yo también me encontré con este problema. Parecía ocurrir cada vez que empezaba a arrastrar el icono de medios de un bloque en lugar del texto del bloque o el contenedor del bloque. Parece que el problema se resolvió añadiendo 'pointer-events: none;' a los estilos de imagen multimedia de cada uno de mis bloques. La im...
Lee la respuesta completa abajo ↓Pregunta
Versión GrapesJS
- Confirmo que se debe usar la última versión de GrapesJS
¿Qué navegador usas?
Chrome v96.0.4664.45
Enlace de demo reproducible
https://codesandbox.io/s/react-redux-toolkit-application-forked-l5rhp?file=/src/pages/Editor.js
Describe el bicho
¿Cómo reproducir el bicho?
- Simplemente arrastra y suelta el logo en Canvas, deberías tener el error
! imagen
¿Cuál es el comportamiento esperado? Arrastra y suelta el logo en lienzo
¿Cuál es el comportamiento actual? He creado un plugin personalizado sencillo solo un logo, y ahora cuando arrastro y suelto en Canvas me aparece el siguiente error Cannot propiedades de lectura de indefinidas (leyendo 'uploadFile')
Si es necesario ejecutar algo de código para reproducir el error, pégalo aquí abajo: '''js importar React, { useState, useEffect } de "react"; importar { useDispatch } de "react-redux"; importar uvas de "uvasjs"; importar bloque de "grapesjs-blocks-basic";
const Editor = () => { const [editor, setEditor] = useState(); const dispatch = useDispatch();
Plugin personalizado de logotipo función pageLogo(editor) { editor. BlockManager.add("logo", { label: '<div className="gjs-block-label"><img src="https://i.ibb.co/nL2Q7WN/logo.png"></div>', Contenido: '<span><img src="https://i.ibb.co/nL2Q7WN/logo.png" /></span>', Categoría: { id: "logo", etiqueta: "Logo", Abierto: Verdadero } }); }
useEffect(() => { const editor = grapesjs.init({ contenedor: "#editor", storageManager: false, blockManager: cierto, plugins: [pageLogo] });
setEditor (editor); }, [despacho]);
regreso ( <> <div className="ModalVideos"></div> <div id="editor"></div> </> ); };
exportar el editor por defecto;
@artf ¿Qué estoy haciendo mal aquí?
### Código de conducta
- [X] Acepto seguir el Código de Conducta de este proyecto
Respuestas (4)
Yo también me encontré con este problema. Parecía ocurrir cada vez que empezaba a arrastrar el icono de medios de un bloque en lugar del texto del bloque o el contenedor del bloque. Parece que el problema se resolvió añadiendo 'pointer-events: none;' a los estilos de imagen multimedia de cada uno de mis bloques.
La imagen de la que hablo siendo arrastrada: ! imagen
En mi caso: '''javascript editor. BlockManager.add('lx-button', { etiqueta: 'LiveX Button', Medios: '<img style="width: 32px; height: 32px; filter: invert(0.75); pointer-events: none;" src='https://www.svgrepo.com/show/368574/button.svg' />', categoría: 'LiveX', Contenido: ' <div class='lx-button normal'>Ver detalles</div> `, })
'pointer-events: none;' no me funciona, literalmente tengo que reiniciar todo el navegador para que vuelva a funcionar con normalidad.
'pointer-events: none;' no me funciona, literalmente tengo que reiniciar todo el navegador para que vuelva a funcionar con normalidad.
@markovic-nikola: Esto es MUY IMPORTANTE. MUCHAS GRACIAS. :D
Gracias por informar de esto, @throne1986.
Buena pregunta sobre No se pueden leer propiedades de undefined (leyendo 'uploadFile'). 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 #3806
Objetivo:null al añadir vídeo
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión nueva de Chrome Enlace de demo re...
Issue #5378
ErrorTipo no capturado: No se pueden leer propiedades de undefined (leyendo 'Lienzo') mientras se arrastra un componente en el Panel del Gestor de Capas
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v116.0.5845.97 Enlace de demo repr...
Issue #3759
ErrorTipoUncatch: No se ejecutó 'appendChild' en 'Node': el parámetro 1 no es de tipo 'Node'.
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Versión nueva de ChromeEnlace de demo repro...
Issue #3861
Error JS al pulsar la tecla "s" o "w" - No se pueden leer propiedades de undefined (leyendo 'indexOf')
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome Versión 94.0.4606.81 (Versión ofic...
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.