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)
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
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5353
BUG: canvas.script entries can not be JS modules
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 1.56.20 Chromium: 115.0.5790.171 (Of...
Issue #5352
BUG: Uncaught SyntaxError: Unexpected token '{' at CanvasView.ts:590:12
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 1.56.20 Chromium: 115.0.5790.171 (...
Issue #5363
BUG: cannot "sort" elements of layer panel
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 1.56.20 Chromium: 115.0.5790.171 (Of...
Issue #5362
BUG: draggable/droppable property functions not called while dragging
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 1.56.20 Chromium: 115.0.5790.171 (...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.