Issue #5354Opened September 1, 2023by rozek0 reactions

BUG: canvas.script entries do not respect an "import map"

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Version 1.56.20 Chromium: 115.0.5790.171 (Offizieller Build) (arm64)

Reproducible demo link

none

Describe the bug

scripts referenced by canvas.scripts

    let Editor = grapesjs.init({
      canvas: {
        scripts:[...],
        ...

can not import third-party modules based on an "import map".

if the same module has to be used both by editor, preview and HTML export it may require the preparation of two different script versions - one for development (within GrapesJS) and another one for deployment - which should definitely be avoided

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (3)

rozekSeptember 4, 20230 reactions

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
rozekSeptember 4, 20230 reactions

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

Related Questions and Answers

Continue research with similar issue discussions.

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.