Twilio-video.js: Module not supported w/ react

[pkpp1233]

Trying to npm install twilio-video in react and seeing the following error:

Error in ./~/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: 'child_process' in /node_modules/xmlhttprequest/lib

 @ ./~/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36

[manjeshbhargav]

Hi @pkpp1233 ,

Is this happening when you're trying to npm install twilio-video or in the code when you try to require('twilio-video')?

Manjesh

[pkpp1233]

Sorry - npm install works but when trying to require, it assumes we're in
Node and tries to launch a child_process.

On Fri, Nov 11, 2016, 4:46 PM Manjesh Malavalli [email protected]
wrote:

Hi @pkpp1233 https://github.com/pkpp1233 ,

Is this happening when you're trying to npm install twilio-video or in
the code when you try to require('twilio-video')?

Manjesh

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/twilio/twilio-video.js/issues/28#issuecomment-260088549,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA00bcpilwTNYkFiIp4tbt2hKoQUpx74ks5q9QxMgaJpZM4KwQ4V
.

[manjeshbhargav]

Hey @pkpp1233 ,

Let me try and reproduce it on my end and get back to you.

Thanks,

Manjesh

[andrewhl]

I'm getting the same issue.

[markandrus]

Hi @pkpp1233 and @andrewhl,

Thanks for the reports. @manjeshbhargav and I've tried to reproduce with react and react-dom versions 0.14.7 and 15.3.2, but both worked fine for us. Can you please tell us if this is a compile-time error that occurs when building your React app, a client-side error that occurs when interacting with your React app in the browser, or a server-side error that occurs when serving your React app? And can you please include logs demonstrating the failure?

One thing I noticed: xmlhttprequest is still listed as a direct dependency of twilio-video, although it isn't used directly by twilio-video. We should remove it. xmlhttprequest _is_ used by twilio-common, though, where we perform the following check to determine whether or not to load xmlhttprequest:

var XHR = typeof XMLHttpRequest === 'undefined' ?
  require('xmlhttprequest').XMLHttpRequest :
  XMLHttpRequest;

I wonder if this is mis-interacting with some feature of React or maybe even a bundler. Are you using Webpack? Meteor?

Thanks,
Mark

[DJLemkes]

I'm experiencing the same issues while writing an app based on create-react-app.

One co-worker (MacOS) has the same xmlhttp related compilation error. Tried using NPM and Yarn for installation of dependencies but both have the same problems.

Strange thing is that with exactly the same repo (yarn.lock is checked in), I'm not experiencing the compilation error (Ubuntu). However, I don't receive any events that should normally be emitted by a Room. While keeping exactly the same code, but loading the

<script src="//media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.min.js"></script>
<script src="//media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta2/twilio-video.js"></script>

scripts as are used in the quickstart example, fixes the event emitting problems. Everything works fine from that point.

I stripped the xmlhttprequest and ws dependencies in my own fork and installed from that commit but that didn't seem to make any difference for the event emitting problem.

[markandrus]

@DJLemkes thanks for the additional information. Our team will re-test using create-react-app.

[kumasento]

@markandrus Hi, any update with the create-react-app issue? I'm experiencing the same no child_process error.

[kumasento]

My workaround for the issue with create-react-app is:

1. Add the <script> tag of twilio-video to the index.html.
2. In the .js file uses Twilio, just assign const Twilio = window.Twilio, then the compiler won't complain.

[markandrus]

Hi @pkpp1233 @andrewhl @DJLemkes @kumasento,

I think we've finally addressed the issues with React (along with Angular, Meteor, etc.). To ensure we maintain support going forward, we've added a number of "Framework Tests" including twilio-video-react. Any time we make changes going forward, Travis CI will ensure we test against each of these frameworks. We'll be cutting an RC this week and hopefully a -beta4 very soon, but if you want to test out today, you can pin the master branch in your dependencies, e.g.

{
  "dependencies": {
    "twilio-video": "twilio/twilio-video.js#master"
  }
}

Can you please let us know if this fixes the issue?

Thanks,
Mark

[kumasento]

@markandrus Thanks, I think this version is working. Will let you know if we find further bugs.

[markandrus]

-beta4 is now released. Please pin to this version:

{
  "dependencies": {
    "twilio-video": "1.0.0-beta4"
  }
}

Thanks!
Mark

[DJLemkes]

(back from a long holiday, so I'm now in the process of checking this out)

Really sorry to comment on this closed issue again, but I'm still experiencing some problems when including twilio-video as a NPM dependency.

The two setups I have are as described below, both based on create-react-app:

• twilio-video (1.0.0-beta4) inclusion via script tag in HTML file and manual inclusion of Twilio on window: works fine, as expected.
• twilio-video (1.0.0-beta4) installed as a NPM/Yarn dependency: yes, it solved the installation and bundling issues fixed in PR#4. Setting up localMedia and a connection works fine as well. However, it seems as if events on a room are not emitted anymore. As a result of this, I'm not able to show video and react to disconnected events in my case.

Toggling between these two setups resolves the issues I'm having with the events not being emitted.

I included the debug logs of both a working and non-working setup. Only errors I could detect are SIP 415 Unsupported Media Type messages.

Please let me know if you're able to reproduce or if I'm doing something wrong. I'll dig around a bit in the code and my setup, but I think you'll be faster to pinpoint a problem :)

The package.json I use for this project is

"devDependencies": {
    "babel-eslint": "7.1.1",
    "eslint": "3.7.1",
    "eslint-config-airbnb": "12.0.0",
    "eslint-plugin-import": "1.16.0",
    "eslint-plugin-jsx-a11y": "2.2.2",
    "eslint-plugin-react": "6.3.0",
    "flow-bin": "0.33.0",
    "node-sass": "3.9.3",
    "react-scripts": "0.6.1"
  },
  "dependencies": {
    "bootstrap": "3.3.7",
    "bootstrap-sass": "3.3.7",
    "immutable": "3.8.1",
    "keymirror": "0.1.1",
    "react": "15.2.1",
    "react-bootstrap": "0.30.7",
    "react-dom": "15.2.1",
    "react-immutable-proptypes": "2.1.0",
    "react-motion": "0.4.5",
    "react-redux": "4.4.5",
    "react-router": "2.8.0",
    "redux": "3.6.0",
    "redux-logger": "2.6.1",
    "redux-thunk": "2.1.0",
    "twilio-video": "1.0.0-beta4"
  }

not_working_module.txt
working_script_inclusion.txt

[stueynet]

@kumasento can you confirm that doing const Twilio = window.Twilio is safe. I often get

ReferenceError: Can't find variable: Twilio

Hoping that might fix the issue.

[DJLemkes]

When including twilio-video via script tags, I'm doing the same trick as @kumasento which always works for me.

@stueynet are you sure that the Twilio script tag is loaded before the other code is trying to use it?

[stueynet]

@DJLemkes its happens very rarely but it does happen occasionally. Should I put the twilio script in the head instead do you think?

[markandrus]

@DJLemkes wow, you have some very strange logs with those 415 Unsupported Media Type... we will have to look into those. Today was busy—we cut an rc13 in anticipation of a beta5—but I plan to look into this more closely Monday morning.

[markandrus]

@DJLemkes I looked at the 415 responses—these are being triggered because we cannot apply the remote SDP answers; however, I looked at them in comparison to the offers, and they ought to be valid. Any chance you could share a small repro example (in conjunction with the devDependencies and dependencies you shared above) that I could spend some time with? Otherwise I can try setting up a new project with react-scripts, but it might be helpful to see your example code and build script.

[DJLemkes]

@markandrus I tried to reproduce this morning.

When trying to start a new create-react-app project, it produced some non descriptive errors. Since I saw that CRA was using Yarn by default, I upgraded Yarn (0.15.x -> 0.20.x) which helped to start the project. Seeing that I wasn't able to reproduce, I did the usual rm -rf node_modules in my problematic project again and now everything seems to be working with twilio-video beta4.

Bottom line: upgrading Yarn helped in this case :). Can't tell what changed in Yarn itself and its dependency resolving mechanism though. Couldn't find any changelogs for Yarn.

[markandrus]

Hmm, very strange 🤔 Glad it worked, though! 😅

[spsiddarthan]

Had the same issue wrt Twilio voice call, thanks for resolving @kumasento