Canvas.script entries do not respect an "import map"

https://github.com/GrapesJS/grapesjs/issues/5353#issuecomment-1704023749

have you tested them?

when trying

      canvas: {
        scripts:[                                    // scripts for the "iframe"
          { src:'/js/ImportMap.json',               type:'importmap' },
          { src:'/js/common-applet-support.esm.js', type:'module' },
        ],
        styles: [                                // stylesheets for the "iframe"
          '/css/common-applet-support.css',
        ],
      },

in the current version of GrapesJS, I get the following (expanded) error message in the browser log:

FrameView.ts:310 External import maps are not yet supported.
  | c | @ | FrameView.ts:310
-- | -- | -- | --
  | o.onload | @ | FrameView.ts:326
  | o._renderFrames | @ | CanvasView.ts:616
  | o._onFramesUpdate | @ | CanvasView.ts:103
  | g | @ | backbone.js:337
  | h | @ | backbone.js:322
  | c | @ | backbone.js:110
  | a.trigger | @ | backbone.js:312
  | set | @ | backbone.js:529
  | e._pageUpdated | @ | Canvas.ts:55
  | g | @ | backbone.js:336
  | h | @ | backbone.js:322
  | c | @ | backbone.js:110
  | a.trigger | @ | backbone.js:312
  | o._onPageChange | @ | index.ts:152
  | _e | @ | _executeBound.js:8
  | (anonymous) | @ | bind.js:10
  | (anonymous) | @ | restArguments.js:16
  | g | @ | backbone.js:337
  | h | @ | backbone.js:322
  | c | @ | backbone.js:110
  | a.trigger | @ | backbone.js:312
  | set | @ | backbone.js:529
  | o.select | @ | index.ts:258
  | (anonymous) | @ | index.ts:128
  | g | @ | backbone.js:336
  | h | @ | backbone.js:322
  | c | @ | backbone.js:110
  | a.trigger | @ | backbone.js:312
  | reset | @ | backbone.js:965
  | o.loadProjectData | @ | Module.ts:164
  | o.load | @ | index.ts:286
  | (anonymous) | @ | Editor.ts:856
  | o.loadData | @ | Editor.ts:856
  | (anonymous) | @ | Editor.ts:837
  | (anonymous) | @ | grapes.min.js:2
  | (anonymous) | @ | grapes.min.js:2
  | s | @ | grapes.min.js:2
  | load (async) |   |  
  | o.renderScripts | @ | FrameView.ts:317
  | o.render | @ | FrameView.ts:292
  | n.render | @ | FrameWrapView.ts:195
  | e.add | @ | ModuleDomainViews.ts:60
  | (anonymous) | @ | ModuleDomainViews.ts:71
  | Ke | @ | each.js:14
  | (anonymous) | @ | backbone.js:1476
  | e.render | @ | ModuleDomainViews.ts:71
  | o._renderFrames | @ | CanvasView.ts:612
  | o._onFramesUpdate | @ | CanvasView.ts:103
  | g | @ | backbone.js:337
  | h | @ | backbone.js:322
  | c | @ | backbone.js:110
  | a.trigger | @ | backbone.js:312
  | set | @ | backbone.js:529
  | e._pageUpdated | @ | Canvas.ts:55
  | g | @ | backbone.js:336
  | h | @ | backbone.js:322
  | c | @ | backbone.js:110
  | a.trigger | @ | backbone.js:312
  | o._onPageChange | @ | index.ts:152
  | _e | @ | _executeBound.js:8
  | (anonymous) | @ | bind.js:10
  | (anonymous) | @ | restArguments.js:16
  | g | @ | backbone.js:337
  | h | @ | backbone.js:322
  | c | @ | backbone.js:110
  | a.trigger | @ | backbone.js:312
  | set | @ | backbone.js:529
  | o.select | @ | index.ts:258
  | (anonymous) | @ | index.ts:128
  | g | @ | backbone.js:336
  | h | @ | backbone.js:322
  | c | @ | backbone.js:110
  | a.trigger | @ | backbone.js:312
  | reset | @ | backbone.js:965
  | o.loadProjectData | @ | Module.ts:164
  | o.load | @ | index.ts:286
  | (anonymous) | @ | Editor.ts:856
  | o.loadData | @ | Editor.ts:856
  | (anonymous) | @ | Editor.ts:837
  | (anonymous) | @ | grapes.min.js:2
  | (anonymous) | @ | grapes.min.js:2
  | s | @ | grapes.min.js:2
  | Promise.then (async) |   |  
  | l | @ | grapes.min.js:2
  | (anonymous) | @ | grapes.min.js:2
  | vh | @ | grapes.min.js:2
  | o.load | @ | grapes.min.js:2
  | (anonymous) | @ | Editor.ts:335
  | (anonymous) | @ | grapes.min.js:2
  | (anonymous) | @ | grapes.min.js:2
  | (anonymous) | @ | grapes.min.js:2
  | vh | @ | grapes.min.js:2
  | (anonymous) | @ | Editor.ts:330
  | setTimeout (async) |   |  
  | o.loadOnStart | @ | Editor.ts:330
  | init | @ | index.ts:87
  | (anonymous) | @ | (index):616

trying to use a data URI instead of a file reference failed as well

Thanks for reporting this, @rozek.

The issue with canvas.script entries do not respect an "import map" 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:

1. Add a setTimeout wrapper to ensure the DOM has settled:

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

2. Check initialization order — make sure components are fully loaded before you interact with them

3. 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