Unexpected token '<', "<!doctype "... is not valid JSON SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON at JSON.parse (<anonymous>)

[ShohanMir]

I'm facing problem to config the storage manager. Here is my code:

function PersonalSiteBuilder() {
  const [editor, setEditor] = useState(null);
  // const { userId } = useParams();
  const [{ user }, dispatch] = useContext();
  console.log('user ID: ', user._id);
  const storageUrl = `http://localhost:9090/api/personal_site/${user._id}/content`;

  useEffect(() => {
    const editor = grapesjs.init({
      container: '#editor',
      storageManager: {
        type: 'remote',

        stepsBeforeSave: 1,
        contentTypeJson: true,
        autosave: false,
        storeComponents: true,
        storeStyles: true,
        storeHtml: true,
        storeCss: true,

        headers: {
          'Content-Type': 'application/json',
        },
        id: 'mycustom-',
        urlLoad: storageUrl,
        urlStore: storageUrl,
        fromElement: true,
        allowScripts: 1,
      },

      // Avoid any default panel
      panels: { defaults: [] },
      plugins: [
        gjsPresetWebpage,
        gjsCustomCode,
        gjsTap,
        gjsBasicBlocks,
        gjsForms,
        gjsPluginExport,
        gjsTouch,
        gjsParserCss,
        gjsTooltip,
        gjsImageEditor,
        gjsTyped,
        gjsStyleBg,
      ],
      pluginsOpts: {
        gjsPresetWebpage: {},
      },
    });
    setEditor(editor);

    // Add a custom button to the panel toolbar
    const panelManager = editor.Panels;
    panelManager.addButton('options', {
      id: 'save-db',
      className: 'fa fa-save',
      command: 'save-db',
      attributes: { title: 'Save Page' },
    });

    // Register the save command
    editor.Commands.add('save-db', {
      run: (editor, sender) => {
        sender && sender.set('active');
        editor.store();
      },
    });

    return () => {
      // Clean up the editor instance if necessary
      editor.destroy();
    };
  }, [user._id, storageUrl]);

  return (
    <div>
      <div id="editor"></div>
    </div>
  );
}

I'm sending the json response from server then why it's showing me the error while I'm trying to save the content?
controller.js file:

savePageContent: async (req, res) => {
    const { userId } = req.params;
    const { content } = req.body;

    try {
      const user = await UsersModel.findById(userId);

      if (user) {
        let page = await PageModel.findOne({ slug: userId });

        if (page) {
          // Update the existing page with the new content
          page.content = content;
          const updatedPage = await page.save();
          res.status(200).json(updatedPage);
        } else {
          // Create a new page
          const newPage = new PageModel({
            slug: userId,
            content,
          });
          const savedPage = await newPage.save();
          res.status(200).json(savedPage);
        }
      } else {
        res.status(404).json({ message: 'User not found' });
      }
    } catch (error) {
      res
        .status(500)
        .json({ error: 'An error occurred while saving the page.' });
    }
  },

loadContent: async (req, res) => {
    const { userId } = req.params;

    try {
      res.header('Content-Type', 'application/json');
      const user = await UsersModel.findOne({ _id: userId });
      const pageSlug = await PageModel.findOne({ slug: userId });

      if (!user || !pageSlug || user._id !== pageSlug.user) {
        return res.status(404).json({ error: 'Page not found.' });
      }

      res.status(200).json({ content: pageSlug.content });
    } catch (err) {
      return res.status(500).json({ error: err.message });
    }
  },

router.js:

router.post('/:userId/content', pageController.savePageContent);
router.get('/:userId/content', pageController.loadContent);

Please help me, I'm a new user of grapes js tool. It's a great tool though.

[artf]

Please read the guide here as it looks like you're relying on outdated storageManager configuration