[QUESTIONS] cannot reference another library from a custom component

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)

megarg• June 6, 20190 reactions

$ 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

artf• June 13, 20190 reactions

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');
}

megarg• June 18, 20190 reactions

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?

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.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

[QUESTIONS] cannot reference another library from a custom component

Question

Answers (3)

Related Questions and Answers

BUG: Move component from Child

[Question] Edit innerHTML in a custom button

Absolute mode, component's style missing when dragged into canvas

custom component save

Paid Plugins That Match This Issue

Browse Plugin Categories