DOM and Functions stop working when import function is used

JavaScript
1

Hi All,

Am not sure why are my functions and DOM not working when i have added an import function below from codepen’s library?

//import * as twilio from "https://cdn.skypack.dev/twilio"

Came across this link from stackoverflow but I have no idea how to tweak the solution to my current problem.
https://stackoverflow.com/questions/71960798/javascript-functions-stop-working-when-using-import-at-top-of-script-even-witho

Codepen link as follows:
https://codepen.io/hrhquek/pen/mdjEvQO

2

Can you give us some more information? What’s your definition of “working”? What’s happening that does not fit that definition?

3

for example the jQuery should fire up whereby the patient details should not be visible when the page is reloaded or refreshed. I got a feeling there are some issues with the import statement as it is showing this error msg " [Package Error] “fs” does not exist. (Imported by “twilio”)." from the developer tools.

$(document).ready(function(){
   $('#patientDetails').addClass('patient-details');
   $('.patient-details').css('display', 'none');
});

if (nricFinValue.length !== 9) {
			alert("Invalid NRIC/FIN value.");
      
		}
		
		//}); to insert when database is done up
		
		else{ //to change to if nricFin is not in database
			alert("Not an existing patient. Need to create a new patient record.");
			//}
			
      $('.patient-details').css('display', 'block');
}
4

It looks like a Node.js library. The fs error also suggests as much (file system part of node) and the package name is twilio-node on npm.

1 Like
5

Codepen does not have twilio-node library, any idea how install in the codepen or is this possible?

Looks like i need to type in this line of code to have the library installed…

npm install twilio
6

Codepen doesn’t run Node.js code. You can use something like Replit for Node.

The library is not meant to be used in the browser.

1 Like
7

I found the following CDN for Twilio that you can add to Codepen, but I am not sure if it is what you need.

https://sdk.twilio.com/js/sync/releases/3.0.1/twilio-sync.min.js

To really use Twilio you will need a backend to act as a proxy to make the actual calls to Twilio API. You never want to expose your API keys/tokens via the client.

1 Like
8

alright got it. Project is still a work in progress. Thanks and appreciate the advice!

9

You can see which libraries are available in the JavaScript SDKs section (Voice, Conversations, Video, TaskRouter, Sync).

I don’t know anything about the twilio APIs or libraries but Sync sounds like some sort of data synchronization.

1 Like
10

Just FYI, CodePen is more of a service to create shareable web UIs. It’s not made for hosting full-blown projects like what you’re trying to achieve. You’ll likely want to look into setting up a Node environment on your computer.

1 Like
11

thanks @lasjorg , appreciate the help.

12

thanks for the advice @colinthornton . appreciate it.

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.