Twilio Voice sdk not supporting webpack > 5

[Rkkk16]

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@twilio/[email protected]',
npm WARN EBADENGINE required: { node: '12' },
npm WARN EBADENGINE current: { node: 'v16.13.1', npm: '8.3.0' }
npm WARN EBADENGINE }

[PikaJoyce]

Hi @Rkkk16,

As this repo is for the Video SDK, I'll transfer your issue to the Voice SDK.

Best,
Joyce

[mhuynh5757]

Hi @Rkkk16 , this issue should be fixed with the latest Voice SDK version. Thanks!

[k-funk]

Can this issue be re-opened?

There's more to supporting webpack 5 than just the engine.

"@twilio/voice-sdk": "2.1.1", gives me these errors when running create-react-app 5 (uses webpack 5). Perhaps others have gotten around this by just including the polyfill, but for me, this package, and it's dependencies (backoff) rely on node-packages that were not designed to be run in the browser. See facebook/create-react-app#11756 for the full a lengthy thread about that topic.

More importantly (since it creates warnings in my dev server), it seems like the installed files include a reference to a sourcemap that is not actually present. The //# sourceMappingURL=AudioPlayer.js.map probably shouldn't be there at all, since AudioPlayer.js isn't minified anyways. Looks like someone else ran into this issue as well.

Module not found: Error: Can't resolve 'util' in '/Users/....../node_modules/backoff/lib'
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 }
WARNING in ./node_modules/@twilio/audioplayer/es5/AudioPlayer.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/....../node_modules/@twilio/audioplayer/es5/AudioPlayer.js.map' file: Error: ENOENT: no such file or directory, open '/Users/....../node_modules/@twilio/audioplayer/es5/AudioPlayer.js.map'

WARNING in ./node_modules/@twilio/audioplayer/es5/Deferred.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/....../node_modules/@twilio/audioplayer/es5/Deferred.js.map' file: Error: ENOENT: no such file or directory, open '/Users/....../node_modules/@twilio/audioplayer/es5/Deferred.js.map'

WARNING in ./node_modules/@twilio/audioplayer/es5/EventTarget.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/....../node_modules/@twilio/audioplayer/es5/EventTarget.js.map' file: Error: ENOENT: no such file or directory, open '/Users/....../node_modules/@twilio/audioplayer/es5/EventTarget.js.map'

ERROR in ./node_modules/backoff/lib/backoff.js 7:11-26
Module not found: Error: Can't resolve 'util' in '/Users/....../node_modules/backoff/lib'

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 }

ERROR in ./node_modules/backoff/lib/function_call.js 7:11-26
Module not found: Error: Can't resolve 'util' in '/Users/....../node_modules/backoff/lib'

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 }

ERROR in ./node_modules/backoff/lib/strategy/exponential.js 3:11-26
Module not found: Error: Can't resolve 'util' in '/Users/....../node_modules/backoff/lib/strategy'

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 }

ERROR in ./node_modules/backoff/lib/strategy/fibonacci.js 3:11-26
Module not found: Error: Can't resolve 'util' in '/Users/....../node_modules/backoff/lib/strategy'

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 }

ERROR in ./node_modules/backoff/lib/strategy/strategy.js 5:11-26
Module not found: Error: Can't resolve 'util' in '/Users/....../node_modules/backoff/lib/strategy'

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 }

ERROR in ./node_modules/precond/lib/checks.js 5:11-26
Module not found: Error: Can't resolve 'util' in '/Users/....../node_modules/precond/lib'

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 }

ERROR in ./node_modules/precond/lib/errors.js 5:11-26
Module not found: Error: Can't resolve 'util' in '/Users/....../node_modules/precond/lib'

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 }

$ node --version
v18.7.0
$ npm list
├── @twilio/[email protected]

[k-funk]

bump. please re-open, or let me know if i should open a new issue

[charliesantos]

@k-funk can you please reopen a new issue and provide all details?

[KlentyDhanush]

I've updated from webpack 4 to 5 and I was using twilio/voice-sdk version 2.7.1 it seems twilio uses querystirng, which is not supported in webpack 5 how to handle this?

[charliesantos]

@KlentyDhanush thanks for reaching out! Can you please submit a new issue and provide more details? Which query string? Any error messages you can share? Etc

[KlentyDhanush]

@charliesantos thank you for the response, I found a work around to fix the issue.

TypeError: qs.escape is not a function
at OutgoingClientScope.payload (ClientCapability.js:67:1)
at ClientCapability.js:113:1
at arrayMap (lodash.js:739:1)
at Function.map (lodash.js:9345:1)
at ClientCapability.toJwt (ClientCapability.js:112:1)

In ClientCapability.js file, var qs = require('querystring'); as webpack 5 doesn't have nodejs modules querystring won't work so used querystring-browser as alias for querystring in the webpack config file.