import {Device} from "@twilio/voice-sdk" not working

[ltanady]

Describe the bug

import {Device} from "@twilio/voice-sdk" not working, output from web show the following result:

Reproduction

• npm install @twilio/voice-sdk --save
• import { Device } from '@twilio/voice-sdk';

Logs

500
inherits is not a function. (In 'inherits(MediaDevicesShim, EventTarget)', 'inherits' is undefined)
node_modules/@twilio/voice-sdk/es5/twilio/shims/mediadevices.js@http://localhost:3000/node_modules/.vite/@twilio_voice-sdk.js?v=87683c0f:1033:13
__require@http://localhost:3000/node_modules/.vite/chunk-A5ICIBVI.js?v=87683c0f:12:44
node_modules/@twilio/voice-sdk/es5/twilio/audiohelper.js@http://localhost:3000/node_modules/.vite/@twilio_voice-sdk.js?v=87683c0f:1272:51
__require@http://localhost:3000/node_modules/.vite/chunk-A5ICIBVI.js?v=87683c0f:12:44
node_modules/@twilio/voice-sdk/es5/twilio/device.js@http://localhost:3000/node_modules/.vite/@twilio_voice-sdk.js?v=87683c0f:8875:44
__require@http://localhost:3000/node_modules/.vite/chunk-A5ICIBVI.js?v=87683c0f:12:44
node_modules/@twilio/voice-sdk/es5/twilio/call.js@http://localhost:3000/node_modules/.vite/@twilio_voice-sdk.js?v=87683c0f:10288:34
__require@http://localhost:3000/node_modules/.vite/chunk-A5ICIBVI.js?v=87683c0f:12:44
node_modules/@twilio/voice-sdk/es5/twilio.js@http://localhost:3000/node_modules/.vite/@twilio_voice-sdk.js?v=87683c0f:11058:30
__require@http://localhost:3000/node_modules/.vite/chunk-A5ICIBVI.js?v=87683c0f:12:44
module code@http://localhost:3000/node_modules/.vite/@twilio_voice-sdk.js?v=87683c0f:11072:46
evaluate@[native code]
moduleEvaluation@[native code]
moduleEvaluation@[native code]
@[native code]
asyncFunctionResume@[native code]
@[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]

System Info

System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Memory: 505.39 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.9.1 - /opt/homebrew/bin/node
    npm: 7.21.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 94.0.4606.61
    Safari: 15.0
  npmPackages:
    @sveltejs/adapter-node: ^1.0.0-next.43 => 1.0.0-next.53 
    @sveltejs/adapter-static: ^1.0.0-next.16 => 1.0.0-next.20 
    @sveltejs/kit: next => 1.0.0-next.179 
    svelte: ^3.34.0 => 3.43.1

Severity

blocking all usage of SvelteKit

Additional Information

No response

[Mlocik97]

It's an error on side of that library, as it's incorrectly export for ESM (and is missing exports in package.json). You can work around it by two ways:

1. use dynamic import:

const Device = (await import('@twilio/voice-sdk')).default.Device;

2. use commonjs import:

import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const Device = require('@twilio/voice-sdk').Device;

[bluwy]

@twilio/voice-sdk doesn't export ESM, but that's fine, as it exports CJS only, which Vite can handle by prebundling it. The issue is that it is using Nodejs modules in its code, which doesn't make sense for a browser package. In particular, the error inherits is not a function is caused by using the utils module here.

Ideally Vite should have a batter warning for this, according to the Vite-prebundled code for @twilio/voice-sdk:

click to show prebundled code

// browser-external:util
var util_exports = {};
__export(util_exports, {
  default: () => util_default
});
var util_default;
var init_util = __esm({
  "browser-external:util"() {
    util_default = new Proxy({}, {
      get() {
        throw new Error('Module "util" has been externalized for browser compatibility and cannot be accessed in client code.');
      }
    });
  }
});

// node_modules/.pnpm/@twilio+voice-sdk@2.0.1/node_modules/@twilio/voice-sdk/es5/twilio/shims/mediadevices.js
var require_mediadevices = __commonJS({
  "node_modules/.pnpm/@twilio+voice-sdk@2.0.1/node_modules/@twilio/voice-sdk/es5/twilio/shims/mediadevices.js"(exports, module) {
    var EventTarget = require_eventtarget();
    var inherits = (init_util(), util_exports).inherits;
// ...

But the way esbuild transpiles the code skipped the useful error message.

Nonetheless, I don't see an easy way to workaround this, and I'm not familiar with shimming nodejs modules in Vite (It's always very iffy). You could open an issue at their repo to properly fix this, and not rely on nodejs modules. Or you could send a PR as well and use this instead of node's inherit util.

[dziardziel-acaisoft]

Hey.

Did You have any updates on that? I'm having, what I think might be, a similar error when using Vite 2.6.14 with Vue 3.2.22.

The code works perfectly when using vue-cli-service instead of vite, however when I paste the exact same code into vite project, it fails silently (without throwing any errors) at the line:

const params = { To: this.currentNumber };

console.log("BEFORE") // This console.log shows in browser devTools.
this.twilioCall = await this.twilioDevice.connect({ params });
console.log("AFTER") // This console.log won't show in browser devTools.

I've tried to add some console.logs into node_modules/@twilio/voice-sdk/es5/twilio/device.js -> Device.prototype.connect, but even if I try to add it before the first line of the function, it won't print.

Did any of you managed to fix this bug?

[bluwy]

I've created twilio/twilio-voice.js#55 to request a fix on the library side. @dziardziel-acaisoft I don't think the issue you reported is related to this, but perhaps twilio/twilio-voice.js#55 might indirectly fix your issue too. Closing this as there's not much we can do.