Las entradas de canvas.script no respetan un "mapa de importación"

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

¿Los has probado?

al intentarlo

      lienzo: {
        scripts:[ // scripts para el "iframe"
          { src:'/js/ImportMap.json', type:'importmap' },
          { src:'/js/common-applet-support.esm.js', type:'module' },
        ],
        Estilos: [ // Hojas de estilo para el "iFrame"
          '/css/common-applet-support.css',
        ],
      },

en la versión actual de GrapesJS, recibo el siguiente mensaje de error (ampliado) en el registro del navegador:

FrameView.ts:310 Los mapas de importación externa aún no están soportados.
  | 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
  | (anónimo) | @ | bind.js:10
  | (anónimo) | @ | 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
  | (anónimo) | @ | index.ts:128
  | g | @ | backbone.js:336
  | h | @ | backbone.js:322
  | c | @ | backbone.js:110
  | a.trigger | @ | backbone.js:312
  | reiniciar | @ | backbone.js:965
  | o.loadProjectData | @ | Module.ts:164
  | o.load | @ | index.ts:286
  | (anónimo) | @ | Editor.ts:856
  | o.loadData | @ | Editor.ts:856
  | (anónimo) | @ | Editor.ts:837
  | (anónimo) | @ | grapes.min.js:2
  | (anónimo) | @ | grapes.min.js:2
  | s | @ | grapes.min.js:2
  | Cargar (asíncrono) |   |  
  | o.renderScripts | @ | FrameView.ts:317
  | o.render | @ | FrameView.ts:292
  | n.render | @ | FrameWrapView.ts:195
  | e.add | @ | ModuleDomainViews.ts:60
  | (anónimo) | @ | ModuleDomainViews.ts:71
  | Ke | @ | each.js:14
  | (anónimo) | @ | 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
  | (anónimo) | @ | bind.js:10
  | (anónimo) | @ | 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
  | (anónimo) | @ | index.ts:128
  | g | @ | backbone.js:336
  | h | @ | backbone.js:322
  | c | @ | backbone.js:110
  | a.trigger | @ | backbone.js:312
  | reiniciar | @ | backbone.js:965
  | o.loadProjectData | @ | Module.ts:164
  | o.load | @ | index.ts:286
  | (anónimo) | @ | Editor.ts:856
  | o.loadData | @ | Editor.ts:856
  | (anónimo) | @ | Editor.ts:837
  | (anónimo) | @ | grapes.min.js:2
  | (anónimo) | @ | grapes.min.js:2
  | s | @ | grapes.min.js:2
  | Promise.then (async) |   |  
  | l | @ | grapes.min.js:2
  | (anónimo) | @ | grapes.min.js:2
  | vh | @ | grapes.min.js:2
  | o.load | @ | grapes.min.js:2
  | (anónimo) | @ | Editor.ts:335
  | (anónimo) | @ | grapes.min.js:2
  | (anónimo) | @ | grapes.min.js:2
  | (anónimo) | @ | grapes.min.js:2
  | vh | @ | grapes.min.js:2
  | (anónimo) | @ | Editor.ts:330
  | setTimeout (asincrónico) |   |  
  | o.loadOnStart | @ | Editor.ts:330
  | init | @ | index.ts:87
  | (anónimo) | @ | (índice):616

intentar usar un URI de datos en lugar de una referencia de archivo también falló

Gracias por informar de esto, @rozek.

El problema con las entradas de canvas.script no respetan un "import map" parece ser una condición de carrera o un problema de sincronización de gestión de estado. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.

Qué probar:

1. Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);

2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos

3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
  Es seguro interactuar con el componente aquí
});

Recomendaciones de siguientes pasos:

• Prueba con la última versión de GrapesJS si no lo has hecho
• Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
• Incluir errores de GrapesJS, de navegador y de consola en tu informe