BUG: Uncaught TypeError: __webpack_require__.r is not a function at ./node_modules/grapesjs/dist/grapes.mjs (grapes.mjs:1:1) at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1) at ./src/Demo/Templates/TextEditor.js (Templates.js:31:1) at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1) at ./src/Demo/Templates/Templates.js (Templates.css:45:1) at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1)
Mustufask opened this issue · 2 comments
Mustufask commented
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Version 123.0.6312.123
Reproducible demo link
Uncaught TypeError: webpack_require.r is not a function at ./node_modules/grapesjs/dist/grapes.mjs (grapes.mjs:1:1) at webpack_require (bootstrap:789:1) at fn (bootstrap:150:1) at ./src/Demo/Templates/TextEditor.js (Templates.js:31:1) at webpack_require (bootstrap:789:1) at fn (bootstrap:150:1) at ./src/Demo/Templates/Templates.js (Templates.css:45:1) at webpack_require (bootstrap:789:1) at fn (bootstrap:150:1)
Describe the bug
How to reproduce the bug?
- ...
- ...
What is the expected behavior?
...
What is the current behavior?
...
If is necessary to execute some code in order to reproduce the bug, paste it here below:
// your code here
import React, { useState, useEffect, useRef } from "react";
import gjsPresetNewsletter from "grapesjs-preset-newsletter";
import thePlugin from "grapesjs-plugin-export";
import grapesjs from "grapesjs";
import "../Templates/Templates.css";
import axios from "axios";
const InitialHtml = () => {
return `
<h1>Hi</h1>
`;
};
const TextEditor = () => {
const [editor, setEditor] = useState(null);
const [userName, setUserName] = useState(" M ");
const [userEmail, setUserEmail] = useState(" M@q.io ");
const [date, setDate] = useState(" 09-02-2024 ");
const [imagePaths, setImagePaths] = useState([]);
useEffect(() => {
const editorInstance = grapesjs.init({
container: "#editor",
fromElement: true,
plugins: [gjsPresetNewsletter, thePlugin],
pluginsOpts: {
gjsPresetNewsletter: {
showDevices: true,
},
thePlugin: {},
},
pageManager: true, // Enable PageManager
storageManager: {
autoload: true, // Load stored pages on editor initialization
autosave: true, // Autosave changes to storage
autoloadPrefix: "grapesjs-", // Prefix for autoloaded pages
},
assetManager: {
upload: "http://localhost:5000/upload",
uploadName: "file",
embedAsBase64: false,
credentials: "include",
autoAdd: 1,
// Default assets
assets: imagePaths,
storeAfterUpload: true,
// Style prefix
stylePrefix: "am-",
// Text on upload input
uploadText: "Drop files here or click to upload",
// Label for the add button
addBtnText: "Add image",
// Custom uploadFile function
uploadFile: function (e) {
var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
// ...send somewhere
// console.log(files);
var formData = new FormData();
for (var i in files) {
formData.append("file", files[i]);
}
axios
.post("http://localhost:5000/upload", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((result) => {
var images = result.data.imageUrl;
editorInstance.AssetManager.add(images);
})
.catch((error) => {
console.error("Error uploading file:", error);
});
},
// * Handle the image url submit from the built-in 'Add image' form.
handleAdd: (url) => {
console.log(url);
url.startsWith("http://localhost:5000/upload")
? editorInstance.AssetManager.add(url)
: alert("Please Enter Valid URL");
},
showUrlInput: true,
},
});
editorInstance.BlockManager.add("my-block-one", {
label: "%userName%",
category: "Variables",
content: `
<span style='padding-inline: 3px'>%userName%</span>
`,
editable: true,
});
editorInstance.BlockManager.add("my-block-two", {
label: "%userEmail%",
category: "Variables",
content: `
<span style='padding-inline: 3px'>%userEmail%</span>
`,
editable: true,
});
editorInstance.BlockManager.add("my-block-three", {
label: "%date%",
category: "Variables",
content: `
<span style='padding-inline: 3px'>%date%</span>
`,
editable: true,
});
editorInstance.on("storage:store", (m) => {
console.log(m);
});
editorInstance.on("asset:upload:error", (props) => {
console.log(props, "assets upload error");
});
setEditor(editorInstance);
}, []);
useEffect(() => {
if (editor) {
editor.on("component:add", (component) => {
if (component.get("tagName") === "img") {
const imageSrc = component.get("src");
if (imageSrc !== undefined && imageSrc.substring(1, 4) !== "svg") {
setImagePaths((prevPaths) => [...prevPaths, imageSrc]);
// checkImageExistence(imageSrc);
}
}
});
const savedState = localStorage.getItem("editorState");
if (savedState) {
editor.load(savedState);
}
}
const mapObj = {
"%userName%": userName,
"%userEmail%": userEmail,
"%date%": date,
};
if (editor !== undefined) {
const html = editor?.getHtml();
const css = editor?.getCss();
const replacedHtml = html?.replace(
/%userName%|%userEmail%|%date%/gi,
(matched) => mapObj[matched]
);
// editor?.setComponents(replacedHtml);
// editor?.setStyle(css);
if (editor?.getHtml() === `<body></body>`) {
const initialHtml = InitialHtml();
editor.setComponents(initialHtml);
}
// console.log(html);
} else {
console.log("Undefined editor");
}
}, [userName, userEmail, date, editor]);
return (
<>
<table id="editor" blocks={[]}>
<thead></thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<footer className="footer sticky">
</footer>
</>
);
};
export default TextEditor;Code of Conduct
- I agree to follow this project's Code of Conduct