Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Crashes on missing process.env #1746

Closed
7 tasks done
Dosant opened this issue Mar 24, 2022 · 15 comments
Closed
7 tasks done

Crashes on missing process.env #1746

Dosant opened this issue Mar 24, 2022 · 15 comments
Assignees

Comments

@Dosant
Copy link

Dosant commented Mar 24, 2022

  • 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.
  • 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.

Actual behavior:

twilio-video.js since 2.21.0, 2.21.1 expects process.env to be available globally. Otherwise it fails with an exception during import.

Expected behavior:

process.env shouldn't be required in browser for twilio-video to work or should be documented as a requirement

Apparently the root cause is this code:

var inherits = require('util').inherits;

Where it imports and bundle node module util that assumes execution in node environment. This fails in user-land runtime if an app's bundler doesn't supply necessary polyfills.

And the crash in the browser happens on this line: https://github.com/browserify/node-util/blob/ad9dbe0df07655a38f0f8fc8feaeccb965d207e7/util.js#L109-L116

Software versions:

  • twilio-video.js: 2.21.0, 2.21.1
  • Third-party libraries (e.g., Angular, React, etc.): Angular 12.1.4, build using angular-cli
  • Browser: Chrome
@charliesantos
Copy link
Collaborator

Hey @Dosant are you seeing this on Angular only?

@Dosant
Copy link
Author

Dosant commented Mar 24, 2022

@charliesantos, I haven't tried to reproduce outside my app which is angular. I believe it is possible to come up with a minimal webpack config where this would fail without angular

@charliesantos
Copy link
Collaborator

@Dosant ok no problem. We are in progress of investigating this issue.

@PikaJoyce
Copy link
Contributor

Hi @Dosant,

I'm currently investigating this issue and I was wondering if you could provide more details on how to repro this. Perhaps a repo or a config set up may be useful.

I've currently tried to reproduce this using Angular 12 using a fresh project (created using ng new) and I'm not seeing any errors related to the one you've mentioned.

Thank you!
Joyce

@Dosant
Copy link
Author

Dosant commented Mar 24, 2022

Hi @PikaJoyce,

Here is the repro starting from ng new: https://github.com/Dosant/my-app
Here is the commit on top of ng new: Dosant/my-app@7d6896d

Starting the app with ng serve I get (coming from twillio on the lines I mentioned in the issue description) :

[Error] ReferenceError: Can't find variable: process
	(anonymous function) (vendor.js:34936)
	__webpack_require__ (runtime.js:23)
	(anonymous function) (vendor.js:33181)
	__webpack_require__ (runtime.js:23)
	(anonymous function) (vendor.js:33155)
	__webpack_require__ (runtime.js:23)
	(anonymous function) (vendor.js:32238)
	__webpack_require__ (runtime.js:23)
	(anonymous function) (vendor.js:5773)
	__webpack_require__ (runtime.js:23)
	(anonymous function) (vendor.js:6458)
	__webpack_require__ (runtime.js:23)
	(anonymous function) (main.js:14:90)
	__webpack_require__ (runtime.js:23)
	(anonymous function) (main.js:323:92)
	__webpack_require__ (runtime.js:23)
	(anonymous function) (main.js:377:93)
	__webpack_require__ (runtime.js:23)
	(anonymous function) (runtime.js:57)
	(anonymous function) (main.js:396)
	webpackJsonpCallback (runtime.js:145)
	webpackJsonpCallback
	Module Code (main.js:2)
	evaluate
	moduleEvaluation
	(anonymous function)
	promiseReactionJob

I believe this is not angular build specific issue, but can be also reproduced with a simpler webpack config (didn't try)

@PikaJoyce
Copy link
Contributor

Hey @Dosant!

Thank you so much for that info. So I cloned your repository and actually ran it. I still wasn't able to repro this. The only other thing I can think of is perhaps it's a difference in node versions? I'd love to be able to dig a bit deeper if it's possible. I'll include a screen shot of what I get when running start on your repo.

image

@Dosant
Copy link
Author

Dosant commented Mar 27, 2022

@PikaJoyce, the error occurs in runtime, so you have to open the app localhost:4200 in a browser to see it fail. Have you tried that?
(sorry if that wasn't clear from the issue description)

@rbclark
Copy link

rbclark commented Mar 28, 2022

I am seeing this using esbuild as well. The application compiles successfully however I receive a Uncaught ReferenceError: process is not defined in the browser on execution. All I am doing is including twilio with a call to const { connect, Participant } = require('twilio-video');, and then building with esbuild and then trying to load the application (which uses twilio-video) in the browser.

@PikaJoyce
Copy link
Contributor

Hi @Dosant

I apologize, it totally skipped my eyes initially. I see the issue now! Thank you for pointing that out and please don't apologize!

@rbclark, thank you for your comment as well. Hopefully we get this resolved soon.

This work is currently being tracked by VIDEO-9282.

Best,
Joyce

@PikaJoyce
Copy link
Contributor

PikaJoyce commented Mar 28, 2022

Hi again @Dosant @rbclark

In the meantime, here's a workaround to unblock you while we continue to work on a more permanent solution:

  1. In your project, run npm i process.

  2. Open src/polyfills.ts

  3. Add the below lines inside of polyfills.ts

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

While this is not a permanent solution, it gets the app to run error free for the time being. Thank you for your patience. We hope to get this issue resolved soon.

Best,
Joyce

@rbclark
Copy link

rbclark commented Mar 30, 2022

Thank you @PikaJoyce! I've been using @esbuild-plugins/node-modules-polyfill for now in order to polyfill the required module for now.

@davbrito
Copy link

This problem surfaces also when using vite. Since vite doesn't use process.env but import.meta.env.

@hi-reeve
Copy link

This problem surfaces also when using vite. Since vite doesn't use process.env but import.meta.env.

got the same issue with vite. hope this be priority

@PikaJoyce
Copy link
Contributor

Hey folks,

A quick update! This PR was recently merged and will go through several rounds of testing before a full release. Looking forward to getting this into everyones hands!

Best,
Joyce

@PikaJoyce
Copy link
Contributor

Hi everyone,

The fix for this issue has been resolved in the most recent release. Please check it out and let me know if there are any further issues. I will now be closing this issue, but please do feel free to continue the conversation here or open another issue with us.

Best,
Joyce

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants