Twilio-video.js: Snowpack with Svelte and Typescript import error.

[drozdzynski]

• [x] I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
• [x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• [x] I verified that the Quickstart application works in my environment.
• [x] I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

Source code and here is the result in browser console

Expected behavior:

I should be able to import the class from twilio-video package.

Actual behavior:

When just trying import import Video from 'twilio-video' I have error: Uncaught TypeError: Super expression must either be null or a function, not object and also on Firefox only I have error: Uncaught (in promise) TypeError: 'get peerIdentity' called on an object that does not implement interface RTCPeerConnection.

Software versions:

• [ ] Browser(s): Chrome, Firefox
• [ ] Operating System: MacOS 11.0.1
• [ ] twilio-video.js: 2.10.0
• [ ] Third-party libraries (e.g., Angular, React, etc.): Svelte, Typescript

[timmydoza]

Hey @drozdzynski - thanks for the issue!

I'm able to reproduce this issue locally with snowpack. It looks like this issue has to do with the fact that out SDK relies on some built in node modules (events and util, specifically).

Snowpack uses rollup to create JavaScript bundles, and with rollup, it is not possible to include modules from node.js itself. Instead, a rollup plugin like rollup-plugin-node-polyfills must be used (which is what happens when the --polyfill-node flag is used with snowpack. It appears that this flag is used in your Codesandbox example).

This appears to be where the problem lies. Our code is expecting CommonJS modules when we require('events'), which will return the EventEmitter function. But when the --polyfill-node flag is used, these modules are imported as ES Modules, which returns the following:

{
  default: EventEmitter,
  EventEmitter: EventEmitter
}

This is what is causing the error that you are experiencing. What is being imported is not an EventEmitter, but an object that contains such. This also applies to the util library.

I found that if we stop relying on these built-in node modules in the SDK, and instead use the same libraries from NPM (see events and util), this will resolve the issue (as long as the @rollup/plugin-node-resolve rollup plugin is used with the { preferBuiltins: false } option).

I've created a ticket in our backlog to use the NPM version of these packages instead of the built-in node.js version. We will see if we can use these libraries in our SDK in a way that does not introduce any breaking changes.

[marcelloma]

@timmydoza Any known workarounds for this? I'm having the exact some issue without typescript with svelte+rollup.

[ben-venntro]

Having similar issues again with svelte+rollup

[timmydoza]

@marcelloma Unfortunately, it appears that the only workaround is to modify the SDK to remove the node dependencies and replace them with the equivalent dependencies from NPM. Then when you build the app with rollup, make sure that the @rollup/plugin-node-resolve rollup plugin is used with the { preferBuiltins: false } option.

[drozdzynski]

@timmydoza is there any progress with this issue? I reported it more than two months ago, and still no news about it. I also tested it with ViteJS which uses Rollup as a bundler so there also TwilioVideo does not work too.

[vimtor]

I also tried Snowpack for development and Twilio dependencies are blocking the start-up.