DOM and Functions stop working when import function is used

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

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

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

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

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

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

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

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

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

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

thanks @lasjorg , appreciate the help.

thanks for the advice @colinthornton . appreciate it.