Issue #4481💬 AnsweredOpened July 27, 2022by skru0 reactions

V0.19.5 Breaks headless editor.setComponents() (with Map/Video block)

Quick answerby artf

Thanks @skru I've actually already taken care of the parseUri here so it should work in the next release

Read full answer below ↓

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome 102.0.5005.115 (Official Build) (64-bit)

Reproducible demo link

Describe the bug

This is an extension of #4473

When adding a map or video block via editor.setComponents() in a headless environment you get a similar "document is not defined error" stemming from ./src/dom_components/model/ComponentImage.js where parseUri() is trying to use the document object.

I've had to quickly put a fix in for us as it's a product launch stopper. I've refactored the parseUri() method to look like this (tests pass and no error):

parseUri(uri) {

  let uriParams = {
    hash: "",

Code SnippetTEXT

hostname: "",
        pathname: "",
        port: "",
        protocol: "",
        query: {},
        search: ""
      }

      if (uri.substring(0, 4) !== "<svg") {

        const url = new URL(uri);
        let query = {};
        var qrs = url.search.substring(1).split('&');
        for (let i = 0; i < qrs.length; i++) {
          let pair = qrs[i].split('=');
          let name = decodeURIComponent(pair[0]);
          if (name) query[name] = decodeURIComponent(pair[1]);
        }

        uriParams.hostname = url.hostname;
        uriParams.pathname = url.pathname;
        uriParams.protocol = url.protocol;
        uriParams.search = url.search;
        uriParams.hash = url.hash;
        uriParams.port = url.port;
        uriParams.query = query;

        return uriParams;

      } else {

        uriParams.pathname = encodeURI(uri);
        
        return uriParams;
      }
    },

That's working fine, but I'm not certain it's the best place to be checking for the svg?? Any tips @artf for a PR?

All the best



### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

Answers (2)

artf• July 28, 2022

Thanks @skru I've actually already taken care of the parseUri here so it should work in the next release

ClaudeCode• May 17, 2026

Thanks for reporting this, @skru.

The issue with v0.19.5 Breaks headless editor.setComponents() (with Map/Video block) appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

Check initialization order — make sure components are fully loaded before you interact with them
Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

Test with the latest GrapesJS version if you haven't
Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
Include GrapesJS version, browser, and console errors in your report

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →

Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

V0.19.5 Breaks headless editor.setComponents() (with Map/Video block)

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Answers (2)

Related Questions and Answers

v0.19.5 Breaks headless editor.setComponents(): "Uncaught (in promise) ReferenceError: window is not defined"

Extending text component breaks textable blocks

Target :null when adding video

Duplicated video block when re-attaching GrapesJs editor to document

Paid Plugins That Match This Issue

Related tutorials

Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live

GJS Market 2.0 - Donations, Tracking, Labels and Better Product Discovery

Preset DevFuture 2.0 — New Update Released

Browse Plugin Categories