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)

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?

1. ...
2. ...

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(" [email protected] ");
  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