Twilio-video.js: “global is not defined” when attempting to consume in Angular/Webpack (using Angular CLI)

[poke]

I am getting a “global is not defined” reference error when attempting to integrate the project into an Angular application. The error is caused by the use of global in
insightspublisher/index.js but I would expect the same error to also occur from the sip.js file.

The way the sources expect a global global makes this difficult to use the library in certain build environments that do not provide this as part of the bundling process. Webpack in particular does not do this. Instead, Webpack puts the compiled modules into a closure that looks approximately like this:

function (module, exports, __webpack_require__) {
   // … module content
}

As you can see, there’s no global being provided.

Steps to reproduce:

1. ng new with a current Angular CLI (7.0.3)
2. npm i --save twilio-video to install the dependency
3. Add the following to app.component.ts:
   ts import * as twilio from 'twilio-video'; console.log(twilio);
4. ng serve
5. Open in browser, and observe the error in the console

Workaround

A possible workaround would be to import the bundle instead from twilio-video/dist/twilio-video. This changes the import name though, prevents @types/twilio-video from matching, and is generally less efficient as this will now bundle a bundle.

[manjeshbhargav]

Hi @poke ,

Thanks for writing in. I will take a look and get back to you.

Thanks,

Manjesh Malavalli
JSDK Team

[poke]

Hey @manjeshbhargav, did you have a chance to look into this problem yet?

[manjeshbhargav]

Hi @poke ,

Sorry for the delay. According to this comment, they have stopped polyfilling Node "globals" in Angular. However, you can do it yourself by adding this line at the end of your src/polyfills.ts:

(window as any).global = window;

Please let me know if this works for you.

Thanks,

Manjesh Malavalli
JSDK Team

[poke]

Yeah, that workaround works for me. Since originally posting the issue, I also have been able to work around this with a TypeScript path mapping to the dist version.

Are there any plans to fix this within the library though? There is no globals in a web environment, so it doesn’t really make much sense to me to rely on that within this library.

[manjeshbhargav]

@poke ,

I think it is a reasonable expectation that any framework that supports UMD-style modules should polyfill global. As far as I know, Angular is the only framework that does not polyfill global.

According to this, Webpack does polyfill global.

Having said that, we will refactor how we determine the global context soon. Please watch this space for updates.

Thanks,

Manjesh Malavalli
JSDK Team

[poke]

Hm, not sure that I would agree that this is related to UMD since global is also not a thing in UMD. This is more a feature of the bundler to support sources that were written targetting Node instead of the browser (or being platform-agnostic). Ideally, this library should just avoid using Node-specific things (since it’s a browser library after all).

But thanks for your response, I’m looking forward to the changes!

[akvaliya]

Any updates on this issue? I have just started integrating twilio-video:^1.18.2 & i am facing the same issue.