Cannot reference another library from a custom component
$ node -v v10.15.3 $ npx node-sass -v node-sass 4.12.0 (Wrapper) [JavaScript] libsass 3.5.4 (Sass Compiler) [C/C++] OS is: Windows 10
Read full answer below ↓Question
Hi Artf, I have been trying to do this for the whole day and it is not working. I could not find any example or no solution came up in my search.
Here is relevant portion of my code in the "components.js" of custom plugin:
model: defaultModel.extend({
defaults: {
.....
alert('before if');
if (IncludeLibrary === false) {
alert('heee');
var script = document.createElement('script');
//script.onload = initMySLider;
script.src = 'https://unpkg.com/formiojs@latest/dist/formio.full.min.js';
document.body.appendChild(script);
}
Formio.createForm(formEl, 'https://examples.form.io/example');
I am getting a compilation error that "Formio" is not defined no-undef.
Note that the script I am referencing above should define Formio but somehow it is not happening. Following without grapesjs is working fine so I know that external script works.
'''
<html> <head> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <link rel='stylesheet' href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'> <script src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'></script> <script type='text/javascript'> window.onload = function() { Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example'); }; </script> </head> <body> <div id='formio'></div> </body> </html> '''Answers (3)
$ node -v v10.15.3
$ npx node-sass -v node-sass 4.12.0 (Wrapper) [JavaScript] libsass 3.5.4 (Sass Compiler) [C/C++]
OS is: Windows 10
You can't use Formio if it's not yet defined, I guess you use the code below to load it
var script = document.createElement('script');
//script.onload = initMySLider;
script.src = 'https://unpkg.com/formiojs@latest/dist/formio.full.min.js';
document.body.appendChild(script);
but as loading a script is an asynchrones operation you have to wait it, so the script.onload part you've commenetd in necesssary...
script.onload = () => {
Formio.createForm(formEl, 'https://examples.form.io/example');
}
Hi Artf Thanks for your response. The basic problem is that "script.onload" event does not fire on Chrome. I also tried "eventListener" but that also does not fire on chrome for script. It fires for "window" but does not fire for "script". Is there any other ideas on how to resolve this issue?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3512
Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin
Hello @artf , I am trying to develop a simple banner plugin which will be include a heading , subheading and link. and every element can be...
Issue #3014
BUG: Move component from Child
Hi, i'm trying to make custom components composed with other components. No problem to do that. I'm facing an issue when i want to move the...
Issue #1959
[Question] Edit innerHTML in a custom button
Hi All, I am trying to change the text in a button component, but I am not able to edit it. I added this type: I included the editable: tru...
Issue #2359
Absolute mode, component's style missing when dragged into canvas
Hi guys, I'm working with grapesjs which version is '0.15.8', and in 'absolute' mode when I drag a block into canvas, I find the styles of...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.