[BUG] Using Parcel to build/package generates a runtime TypeError

[NVMKenneth]

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• 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 { Device } from '@twilio/voice-sdk'
...

...
private deviceConfig: Device.Options = {
    logLevel: 'DEBUG',
    tokenRefreshMs: 10 * 60 * 1000, // 10 minutes
    sounds: {
      incoming: 'REDACTED',
      disconnect: 'REDACTED'
    },
    closeProtection: true
  }
...

...
const device = new Device(token, this.deviceConfig)
...

// tsconfig.json
...
"esModuleInterop": true,
...

Expected behavior:

Able to use Parcel as a build/packaging tool and have the SDK execute without TypeError. This error appears in a tab (not extension). The passed-in token and device values work fine.

Actual behavior:
When using parcel, I am getting a runtime TypeError. If using Webpack, this error does not appear.

TypeError: (this._options.AudioHelper || audiohelper_1.default) is not a constructor

Console log

TypeError: (this._options.AudioHelper || audiohelper_1.default) is not a constructor
    at Device1._setupAudioHelper (device.ts:1304:19)
    at Device1.updateOptions (device.ts:791:10)
    at new Device1 (device.ts:539:10)
    at loginToTwilio (index.ts:154:21)
    at async ExecuteWrapper.invoke (Executor.ts:57:21)
    at async RetryPolicy.execute (RetryPolicy.ts:152:22)
    at async TwilioWebRTC.login (index.ts:56:7)

Software versions:

• Browser(s): Chrome
• Operating System: MacOS/Windows
• twilio.js: device.js
• Third-party libraries (e.g., Angular, React, etc.): Parcel, versions 2.5.0 and later (also tested with 2.6.2) in node various versions (16.15.0,18.x)

[mhuynh5757]

Thanks for bringing this to our attention @NVMKenneth, we're tracking this internally.

[wsoaresfilho]

@mhuynh5757 , do you guys have any update on this issue? I just ran into this problem too. We have just updated our React application to use Parcel 2 (we were using Parcel 1 before) and this problem came up. Is there any workaround to make it work, it any fix available?

[ayyrickay]

I also ran into this issue while building the Twilio Dev Phone. I ended up just writing my own webpack config, but it's definitely frustrating. https://stackoverflow.com/questions/71256281/a-constructor-from-a-node-module-im-importing-works-when-using-create-react-app/73736170#73736170

[wsoaresfilho]

I forked the Twilio package and fixed it, but it looks more like a problem with Parcel and not Twilio, to be honest.

[charliesantos]

@wsoaresfilho what was your solution?

[charliesantos]

Please check #55 (comment)
Please feel free to follow up. If you have any questions.