When attempting to utilize Twilio for sending SMS messages in a Vue.js project, I encountered an error while accessing Tools -> Developer Tools.
<template>
<div>
<input type="text" v-model="to" placeholder="Phone number">
<textarea v-model="body" placeholder="Message"></textarea>
<button @click="sendSMS">Send SMS</button>
</div>
</template>
<script>
import twilio from 'twilio';
export default {
data() {
return {
to: '',
body: '',
accountSid: 'YOUR_TWILIO_ACCOUNT_SID',
authToken: 'YOUR_TWILIO_AUTH_TOKEN',
twilioNumber: 'YOUR_TWILIO_NUMBER',
};
},
methods: {
async sendSMS() {
const client = twilio(this.accountSid, this.authToken);
try {
await client.messages.create({
body: this.body,
from: this.twilioNumber,
to: this.to,
});
alert('SMS sent successfully!');
} catch (error) {
console.error('Error sending SMS:', error);
alert('Error sending SMS. Please try again.');
}
},
},
};
</script>
The following error occurred:
twilio.js?t=17137716…939&v=b4dcae58:2609 Uncaught TypeError: Class extends value undefined is not a constructor or null
at twilio.js?t=17137716…&v=b4dcae58:2609:36
at ../../../node_modules/agent-base/dist/src/index.js (twilio.js?t=17137716…9&v=b4dcae58:2763:7)
I have installed the npm package 'twilio' and specified it in my package.json as: "twilio": "^5.0.4"