Twilio webrtc library is causing compilation error in webpack 5

[ajorkowski]

• [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:

import('twilio-video')

Expected behavior: Should not cause a compilation error in webpack 5. The underlying problem is that the chrome.js file is importing 'utils' which is a node.js core module and webpack is not including these anymore. Ideally there wouldn't be a utils import, but I guess I can work around this...

Actual behavior:

ERROR in ../client_modules/node_modules/@twilio/webrtc/lib/rtcpeerconnection/chrome.js 6:15-39
Module not found: Error: Can't resolve 'util' in 'C:\Projects\kalix.ui\client_modules\node_modules\@twilio\webrtc\lib\rtcpeerconnection'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

[LaurynasGr]

Twillio is using Node JS native util package.

The issue here is that prior to v5 webpack used to include browser polyfills for Node JS modules - with version 5 this behaviour has ben removed. To fix this issue just install the util package from NPM:

npm i util

Another note is that Twillio is also accessing the "global" process variable which has also been removed with webpack v5 release. To fix that install the process package from NPM

npm i process

and add a new plugin to your webpack config

{
    ...
    plugins: [
        ...
        new webpack.ProvidePlugin({ process: 'process' }),
    ]
}

More info here https://webpack.js.org/blog/2020-10-10-webpack-5-release/#changes-to-the-structure

[ajorkowski]

Ok, great, thanks for confirming those two things. I will use this workaround though wouldn't it be better if these weren't dependencies in the long run?

[manjeshbhargav]

@ajorkowski This should be solved once the SDK dependency @twilio/webrtc moves to es6. Hopefully we will work on it soon. In the meantime, please use the workarounds suggested by @LaurynasGr .

Thanks,

Manjesh

[nring]

We're hitting this issue with Next.js and twilio-video too. But unfortunately the workarounds mentioned by @LaurynasGr aren't working for us. Has any process been made with @twilio/webrtc being moved to ES6?

Issues are resolved if we revert to Webpack4, but using Webpack5 solves a host of other unrelated issues for our project.

[nsmithdev]

I'm having the same problem now attempting to upgrade to Angular 12 which uses WebPack 5 now.

This fixed the main build

npm i -S util 

Adding the code below to polyfills.ts fixed ng test

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

[niemyjski]

I really wish this was updated and worked out of the box with no node polyfils

[aaroncsolomon]

Echoing @niemyjski above - it would be great for Twilio to fix this issue - having to manage polyfills for integration here is really frustrating just to get the out of the box software working - I've talked with Twilio support and they've been mostly unhelpful - this is a missed opportunity for Twilio business, please fix the 2.1.0 Javascript SDK

[makarandp0]

This is being tracked by an internal task now. (VIDEO-8609)

[mckenzieja]

@LaurynasGr solution worked for me after I updated a create-react-app project.

[PikaJoyce]

Hi folks,

Happy to announce that the latest release 2.21.1 fixes this issue. Please give it a spin and let us know if you're still seeing any issues!

Thank you for all of your patience, Joyce

[talksik]

process is not defined if I import connect in an electron app.

I don't think this was fixed

[PikaJoyce]

Hi @talksik,

Please check the most recent release. You may be facing the same issue as this which has now been resolved.

Best, Joyce

[talksik]

thank you for the prompt reply but I'm getting the same error. going to try integrating daily.co or agora