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...