Uncaught TypeError: __webpack_require__.r no es una función en ./node_modules/grapesjs/dist/grapes.mjs (grapes.mjs:1:1) en __webpack_require__ (bootstrap:789:1) en fn (bootstrap:150:1) en ./src/Demo/Templates/TextEditor.js (Templates.js:31:1) en __webpack_require__ (bootstrap:789:1) en fn (bootstrap:150:1) en ./src/Demo/Templates/Templates.js (Templates.css:45:1) en __webpack_require__ (bootstrap:789:1) en fn (bootstrap:150:1)

Versión GrapesJS

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

¿Qué navegador usas?

Versión 123.0.6312.123

Enlace de demo reproducible

Uncaught TypeError: webpack_require.r no es una función en ./node_modules/grapesjs/dist/grapes.mjs (grapes.mjs:1:1) en webpack_require (bootstrap:789:1) en fn (bootstrap:150:1) en ./src/Demo/Templates/TextEditor.js (Templates.js:31:1) en webpack_require (bootstrap:789:1) en fn (bootstrap:150:1) en ./src/Demo/Templates/Templates.js (Templates.css:45:1) en webpack_require (bootstrap:789:1) en fn (bootstrap:150:1)

Describe el bicho

¿Cómo reproducir el bicho?

1. ...
2. ...

¿Cuál es el comportamiento esperado? ...

¿Cuál es el comportamiento actual? ...

Si es necesario ejecutar algo de código para reproducir el error, pégalo aquí abajo: '''js Tu código aquí import React, { useState, useEffect, useRef } de "react"; importar gjsPresetNewsletter de "grapesjs-preset-newsletter"; importa thePlugin desde "grapesjs-plugin-export"; importar uvas de "uvasjs"; importación ".. /Plantillas/Templates.css"; importar axios de "axios";

const InitialHtml = () => { volver '

<h1>Hola</h1> `; };

const TextEditor = () => { const [editor, setEditor] = useState(null); const [nombreDeusuario, nombreDeusuario_establecer] = estadouse(" M "); const [userEmail, setUserEmail] = useState(" [email protected] "); const [fecha, fechaEstablecer] = useState(" 02-09-2024 "); const [imagenCaminos, setImagenCaminos] = useState([]);

useEffect(() => { const editorInstance = grapesjs.init({ contenedor: "#editor", fromElement: cierto, plugins: [gjsPresetNewsletter, thePlugin], pluginsOpts: { gjsPresetNewsletter: { mostrarDispositivos: cierto, }, thePlugin: {}, }, Gestor de páginas: true, // Activar Gestor de páginas storageManager: { autoload: true, // Cargar páginas almacenadas al inicializar el editor autoguardado: cierto, // El guardado automático cambia en el almacenamiento autoloadPrefijo: "grapesjs-", // Prefijo para páginas autocargadas }, assetManager: { subir: "http://localhost:5000/upload", uploadName: "file", embedAsBase64: false, Credenciales: "incluir", autoAdd: 1, Activos por defecto recursos: imagePaths, storeAfterUpload: cierto, Prefijo de estilo prefijo style: "am-", Texto al subir la entrada uploadText: "Deja archivos aquí o haz clic para subir", Etiqueta para el botón de añadir addBtnText: "Añadir imagen", Función personalizada de uploadFile uploadFile: función (e) { var files = e.dataTransfer ? e.dataTransfer.files: e.target.files; // ... envía a algún sitio console.log(archivos); var formData = new FormData(); for (var i in files) { formData.append("archivo", archivos[i]); } axios .post("http://localhost:5000/upload", formData, { cabeceras: { "Tipo-Contenido": "multipart/form-data", }, }) .then((resulta) => { var images = result.data.imageUrl; editorInstance.AssetManager.add (imágenes); }) .catch((error) => { console.error ("Error al subir archivo:", error); }); },

• Manejar la URL de la imagen enviada desde el formulario integrado de 'Añadir imagen'. handleAdd: (url) => { console.log(URL); url.startsWith("http://localhost:5000/upload") ? editorInstance.AssetManager.add(url) : alert("Por favor introduzca URL válida"); }, showUrlInput: cierto, }, });

editorInstance.BlockManager.add("my-block-one", { etiqueta: "%nombreUsuario%", categoría: "Variables", Contenido: ' <span style='padding-inline: 3px'>%userName%</span> `, Editable: Cierto, });

editorInstance.BlockManager.add("mi-bloque-dos", { etiqueta: "%userEmail%", categoría: "Variables", Contenido: ' <span style='padding-inline: 3px'>%userEmail%</span> `, Editable: Cierto, });

editorInstance.BlockManager.add("mi-bloque-tres", { etiqueta: "%data%", categoría: "Variables", Contenido: ' <span style='padding-inline: 3px'>%fecha%</span> `, Editable: Cierto, });

editorInstance.on("storage:store", (m) => { console.log(m); });

editorInstance.on("asset:upload:error", (props) => { console.log(utilería, "error de subida de recursos"); });

setEditor (editorInstance); }, []);

useEffect(() => { si (editor) { editor.on("component:add", (component) => { if (component.get("tagName") === "img") { const imageSrc = component.get("src");

if (imageSrc !== indefinido && imageSrc.substring(1, 4) !== "svg") { setImagePaths((prevPaths) => [... prevPaths, imageSrc]); comprobarExistenciaImagen(Src); } } });

const savedState = localStorage.getItem("editorState"); if (estado guardado) { editor.load(estado guardado); } }

const mapObj = { "%nombreUsuario%": NombreDeUsuario, "%userEmail%": userEmail, "%fecha%": fecha, };

if (editor !== indefinido) { const html = editor?. getHtml(); const css = editor?. getCss(); const replacedHtml = html?. reemplazar ( /%userName%|%userEmail%|%date%/gi, (coincidido) => mapObj[coincidido] );

¿editor?. setComponents (replacedHtml); ¿editor?. setStyle(css);

si (¿editor?. getHtml() === '<body></body>') { const initialHtml = InitialHtml(); editor.setComponents(initialHtml); } console.log(html); } else { console.log("Editor indefinido"); } }, [usuarioNombre, usuarioEmail, fecha, editor]);

regreso ( <> <tableid="editor" bloques={[]}> <thead></thead> <tbody> <tr> <td></td> </tr> </tbody> </table>

<footer className="footer sticky"> </footer> </> ); };

exportar el editor de texto por defecto;

### Código de conducta

- [x] Acepto seguir el Código de Conducta de este proyecto