Error in Typescript: 'SyncClient' not found in Twilio

While working on my Ionic app, I encountered an issue every time I attempted to use the twilio-chat library in my project through npm install. The error consistently appeared in the .d.ts files.

Here is how I imported it in my provider :

import { Client } from "twilio-chat";

Errors: https://i.sstatic.net/wv0o0.png

It seems like the .d.ts files are unable to locate the necessary dependency modules. Could this be related to typings in TypeScript? I am relatively new to TypeScript.

However, when I switched to using the CDN, everything worked perfectly fine.

The versions I am using are as follows:

  • ionic: "3.18.0"
  • typescript: "2.2.1"
  • twlio-chat: "1.2.1"

Update: I managed to resolve the issues with SyncClient and Emc Client by mapping out the location of the problematic .d.ts files. The only setback was that some twilio dependencies such as twilio-transport, twilsock, and twilio-notifications did not have corresponding .d.ts files.

My tsconfig.json file includes:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "baseUrl": ".",
    "paths": {
      "twilio-sync": ["node_modules/twilio-sync/lib"],
      "twilio-ems-client": ["node_modules/twilio-ems-client/lib"]
    }
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Thanks in advance!

Answer №2

Greetings from a Twilio Developer Advocate! I'm here to assist you with your query :) It should be a smooth process since both the twilio-sync and twilio-chat libraries are built in TypeScript. Could you kindly share your tsconfig.json file along with the complete list of dependencies you have installed? This will allow us to investigate further.

Remember, make sure to install typings for any module that doesn't come with its own typings.

Best regards, Dominik

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Firebase Firestore is returning the dreaded [object Object] rather than the expected plain object

I've created a custom hook called useDocument.js that retrieves data from a firestore collection using a specific ID. However, I'm encountering an issue where it returns [object Object] instead of a plain object. When I attempt to access the nam ...

Incorporating a custom transpiled file format into Typescript imports

I am trying to import a file format .xyz that does not have fixed types for all instances of the format: import { Comment, Article, User } from "./Blog.xyz" However, I keep getting this error message: TS2307: Cannot find module './Blog.xy ...

Using jQuery, JavaScript, and PHP, we can easily implement the functionality to disable the form and submit button

After submitting a form, I am trying to disable both the submit button and the form itself. However, every solution I have attempted either disables the form and button without submitting it or submits the form without disabling the button/form. This is t ...

What is the best way for the parent component to initiate an http call, update its state, and then distribute that state to all child components

Recently, I encountered an issue while trying to call axios.get('{link here}') from the componentDidMount() method of the parent component: class Parent extends React.Component { constructor(){ super(); this.state = { stuff: [] } ...

The functionality of jQuery touch events on iOS devices is not functioning properly

I'm encountering issues with jQuery touch events on iOS devices. Here is my current script: $(document).ready(function(){ var iX = 0,iY = 0,fX = 0,fY = 0; document.addEventListener('touchstart', function(e) { ...

How can I access a store getter in Vue after a dispatch action has finished?

I am currently utilizing Laravel 5.7 in combination with Vue2 and Vuex. While working on my project, I have encountered an issue where Vue is not returning a store value after the dispatch call completes. The workflow of my application is as follows: Wh ...

Display a message stating "No data available" using HighCharts Angular when the data series is empty

My Angular app utilizes Highchart for data visualization. One of the requirements is to display a message within the Highchart if the API returns an empty data set. I attempted a solution, but unfortunately, the message does not appear in the Highchart a ...

Amcharts does not display the percentage value

I've been working on creating a bar graph using amcharts and I'm trying to show the percentage on top of each bar. Here is the code snippet I have so far: $.ajax({ url: "https://daturl", contentType: "application/json; charset=utf-8", ...

Tips for utilizing the 'contains' feature within web elements with Java Selenium WebDriver?

In my current project, I am facing a challenge with two specific elements: one is a string formatted as ABC £12,56 and the other is a box called "Cashbox" that should be 15% of the value of the string. However, when attempting to locate the CSS for both e ...

How to conditionally apply a directive to the same tag in Angular 4

I am implementing angular 4 and have a directive in my template for validation purposes. However, I would like to first check if a specific condition is true before applying the directive. Currently, my code looks like this: <div *ngIf="groupCheck; els ...

Guide on linking Influxdb information in a Vue application using node.js?

I have successfully connected my InfluxDB database to my Vue app and can log data in the terminal using the code below: // index.js import express from "express"; // These lines make "require" available import { createRequire ...

Clearing hoverIntent using jQuery

In my scenario, I have three items identified as X, Y, and Z. The functionality of hovering is controlled by the hoverIntent. When I hover on item X, a tooltip is displayed using the following code: jQuery('.tooltiper').hoverIntent({ ove ...

Securing the Firebase Admin SDK JSON file within a NextJS project for optimal protection

I'm currently working on a NextJS app that uses the Firebase Admin SDK, but I'm unsure of where to securely store the JSON file containing all the keys. It seems that integrating secret keys in JSON files with an .env.local file is not possible. ...

I am encountering difficulties while attempting to import Typescript files. Upon compiling them into Javascript, I am faced with errors in the web browser, specifically the issue of "exports is not defined"

When I run TodoAppUI.js:15, I get an error saying "Uncaught ReferenceError: exports is not defined" In all my classes, I use the export keyword. For example: export class mysclass { public constructor(){} } Even though I have the proper syntax for impo ...

The art of finding information algorithm

Having a JSON file containing about 10,000 records, each record includes a timestamp in the format '2011-04-29'. Currently, I also have a client-side array (referred to as our calendar) with arrays such as - ['2011-04-26', '2011- ...

Alter the background image of a DIV based on the selected menu item

I am working on a project that involves a div element with the class "jumbotron" which currently has a background image applied to it. Additionally, I have a menu consisting of 6 items that I would like to interact with. My goal is to dynamically change ...

The react-redux developer tool appears to be disabled and is not displaying the current state of the application on the extension toolbar

Just finished the redux-tutorial and attempting to view the state in the redux-devtools. However, the redux-devtools seems to be inactive on the extensions bar. Upon clicking it, a menu appears with options like "to right, to left etc". Selecting one of ...

What is the best way to create a Typescript type consisting of only the public members of a different type?

Inside the realm of Typescript 4.3.5 In what manner can I establish a type that consists solely of the public members and properties of another type? Take into account: class Thing { public name: string private secret: string public greet(): string ...

Disable a tab or menu item if the bean's boolean value is 'false'

I designed a home page with various menu/tab options that redirect the user when clicked, but only if they have access to that specific item. If access is not granted, the menu item becomes unclickable. While this functionality works, I am interested in en ...

Displaying spinner until the entire section has finished loading

In order to display a loading spinner until all images in a specific section of the page have fully loaded, I am utilizing Django, jQuery, and Ajax technologies. The HTML structure consists of two main divs: On the left side, there is a table, while on t ...