With twilio API in vuejs2 app I got error client.on is not a function

[sergeynilov]

I want to use twilio API in my vuejs2 app looking at demo https://github.com/TwilioDevEd/sdk-starter-node:

I got client object with Twilio credentials, but next I want to assign tokenAboutToExpire with code like :

const client = new Twilio(
    process.env.VUE_APP_TWILIO_API_KEY,
    process.env.VUE_APP_TWILIO_API_SECRET,
    {
        accountSid: process.env.VUE_APP_TWILIO_ACCOUNT_SID,
    }
)
console.log('client::')
console.log(client)
console.log('client.chat::')
console.log(client.chat)

client.on("tokenAboutToExpire", async () => { // Error line
// client.chat.on("tokenAboutToExpire", async () => { // If to uncomment this line 
    const token = await this.fetchChatToken()
    client.updateToken(token)
})

and got error:

Uncaught (in promise) TypeError: client.on is not a function
    at _callee3$ (usersChat.vue?ec5f:264)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)

and in the console I see that I have client and client.chat : https://prnt.sc/w4frzp
What is wrong?
Is it invalid client object?

Thanks!

[jefflinwood]

Hi, looking at your code, I think you might have mixed server side Node.js code:

const client = new Twilio(
process.env.VUE_APP_TWILIO_API_KEY,
process.env.VUE_APP_TWILIO_API_SECRET,
{
accountSid: process.env.VUE_APP_TWILIO_ACCOUNT_SID,
}
)

with the calls to a Chat Client:

client.on("tokenAboutToExpire", async () => { // Error line
// client.chat.on("tokenAboutToExpire", async () => { // If to uncomment this line
const token = await this.fetchChatToken()
client.updateToken(token)
})

The Chat Client gets initialized with an access token - your front end code does not get your Twilio Account Credentials.

[sergeynilov]

Hello,
Thanks for your feedback, I tried to follow it and got token, which loks like
“eyJ0eXAiO...” and I try next :

...
const Twilio = require('twilio')

console.log('$twilio::')
console.log(Twilio)

console.log('$twilio.Chat::')
console.log(Twilio.Chat)

const client = await Twilio.Chat.Client.create(token)


```I got error :

`TypeError: Cannot read property 'Client' of undefined
`
and in console I see invalid twilio object : https://prnt.sc/w41cc7

I suppose I imported invalid twilio object, but how correctly ?
looks like in the sdk-starter-node-master wasd done in the same way?

package.json :

"axios": "^0.19.0",
"core-js": "^3.3.2",
...
"twilio": "^3.54.0",
"vue": "^2.6.10",
...

[sergeynilov]

Hello,
Could you please take a look at my error 3 days ago ?
Thanks!

[sergeynilov]

I try to run this https://www.twilio.com/docs/libraries/node example
in newly created vuejs app

In my first attempts I used twilio parameters of my client.
Now I created new twilio account with parameters : https://prnt.sc/w73idx

Please dont worry that it is unsafe - that is not working account

and in src/App.vue I added twillio code with parameters by button click :

<template>
  <div id="app">
    <button type="button" class="btn btn-primary" @click.prevent="checkTwilioAccount()">
      checkTwilioAccount
    </button>

  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  
  mounted() {
  }, // mounted() {
  
  methods: {
    
    checkTwilioAccount: function () {
      console.log('checkTwilioAccount::')
      var accountSid = 'AC907b0b422f95363a6508f062385d025b'; // TWILIO_ACCOUNT_SID
      // Your Account SID from www.twilio.com/console
      var authToken = '3de70518507bde59409d8dbcc552ffe8';   // TWILIO_AUTH_TOKEN
      // Your Auth Token from www.twilio.com/console
  
      var twilio = require('twilio');
      console.log('twilio::')
      console.log(twilio)
  
      var client = new twilio(accountSid, authToken);
      console.log('client::')
      console.log(client)
  
  
      client.messages.create({
        body: 'Hello from Node',
        to: '+12345678901',  // Text this number  I LEFT PHONE NUMBER AS ORIGINAL
        from: '+12345678901' // From a valid Twilio number   I LEFT PHONE NUMBER AS ORIGINAL
      })
          .then((message) => console.log(message.sid));
  
    }, // checkTwilioAccount: function () {
  },
  
  }
</script>

and I got error in the browsers console : https://imgur.com/a/YI1aeg6
Did I use invalid parameters? have to make some init procedure under my twilllio account?

In my package.json :

    "core-js": "^3.6.5",
    "twilio": "^3.54.1",
    "vue": "^2.6.11"

Thanks!

[sergeynilov]

I tried to debug this issue in Twilio.js:258 and found :
https://prnt.sc/w79oys

and ref to undefined element
https://prnt.sc/w79pqi

and I see ref 10 years old
https://prnt.sc/w79q4s
can it be reason of my error and why so ?

I tried version of twilio 3.54.1 (latest) and 3.54.0
but I have the same error and the same data I see debugging...