Requiring JS libraries in plugin problem

Need help Plugins
1

I was successful creating a Bubble.io PLUGIN that exchanges data with my APP.
I am trying to add Twilio video using their JS libraries and have included a SCRIPT tag into the HEADER area of the ELEMENT definition as:

"src=“https://sdk.twilio.com/js/video/releases/2.15.2/twilio-video.min.js”

When I try to reference Twilio in an Update Function defined as:

function(instance, properties, context) {
const Video = Twilio.Video;
const AccessToken = require(‘twilio-video’).jwt.AccessToken;
const VideoGrant = AccessToken.VideoGrant;
}
– I receive an error message stating that the “require” is not defined.

The plugin GS Host (testing) / element Video Session threw the following error: ReferenceError: require is not defined at eval (PLUGIN_1648508124909x697565887025381400_current/GS-Host–testing–update–Video-Session- at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/eb3ab0b7811e94f1294044fc7d1e975826c7909685f04f52cfa2f294da84cdec/xfalse/x15/run_debug.js:6:2311050 (please check your plugin’s code)

I discovered that Node.js extensions seem to require their FUNCTION definition as a Server side ACTION which I specified as:

function(properties, context) {
const Video = Twilio.Video;
const AccessToken = require(‘twilio-video’).jwt.AccessToken;
const VideoGrant = AccessToken.VideoGrant;
}

But, upon executing the Action an error occurs:

  • Plugin action Log Video Sessions error: ReferenceError: Twilio is not defined
    at eval (eval at build_function (/var/task/index.js:86:21), :4:16)
    at /var/task/index.js:349:23 at run_fn (/var/task/u.js:594:18)

NOTE: I kept the SCRIPT tags in the HEADER of the ELEMENT in the same PLUGIN but don’t see how / whether it is applied.

Any suggestions on how to reference the Twilio JS code to enable the plugin to take advantage of the services?

2

Require is supported on server side action. Anyway, the require point to a jwt script so this si important to keep it safe on server side.

3

Thanks @Jici - I really appreciate your quick note. Yes, saw this used in other plug-ins (e.g., PDF.js) make use of the require on the server side. My question is relates to loading the referenced JS… am I correct that the script tag is located in the Element definition’s header<script src="http://abc.js"></script>?

4

I think there’s different script involved and you need to separate them. What need to be created on server side and what need to be set in client side. Actually, the JWT part need to be created in node server side and the video js will be on client side. You will use the first to set a JWT on the client side after. Example: On page load, createJWT using server side action, and use the result to set a state and use the state info in the Video element.

If you look at the Twilio documentation, you will see that there create the access token in a script in node User Identity & Access Tokens | Twilio
The result of that will be used after in Twilio Video Overview | Twilio

Another option is to create a backend WF. In this backend WF you will return API data. Just before, you will use the Server side script to create an access token and set this in return API data. You will create a request to this backend WF to get the access token. You can use API Connector for that with a DATA api. This can be called directly from the video element.

5

Thanks @Jici - makes sense… much appreciated!

1 Like