process is not defined error with angular 12 [Bug]

[nileshzala005]

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 }

With Angular 12, this is working fine in Angular 11

Angular CLI: 12.0.0
Node: 14.15.4
Package Manager: npm 6.14.10
OS: darwin x64

Angular:
...

Package Version

@angular-devkit/architect 0.1200.0 (cli-only)
@angular-devkit/core 12.0.0 (cli-only)
@angular-devkit/schematics 12.0.0 (cli-only)
@schematics/angular 12.0.0 (cli-only)

If install util js via npm install util
build error is removed but at runtime getting this error.
util.js:109 Uncaught ReferenceError: process is not defined
at Object.1732 (util.js:109)

internally util js is used by twilio-client sdk
if (process.env.NODE_DEBUG) {
var debugEnv = process.env.NODE_DEBUG;
debugEnv = debugEnv.replace(/[|\{}()[]^$+?.]/g, '\$&')
.replace(/*/g, '.*')
.replace(/,/g, '$|^')
.toUpperCase();
debugEnvRegex = new RegExp('^' + debugEnv + '$', 'i');
}

here at the client-side its try to get process object that is node server object. this is causing the issue in angular 12

[msms007]

any updates or work around to this? still struggling to find a fix

[pgarzina]

experiencing the same issue, and is a blocker in updating to Angular 12.

[pgarzina]

@nileshzala005 @msms007 have you guys found a working workaround maybe? :)

[nileshzala005]

@pgarzina instead of NPM packages use CDN version or update to twilio 2.0 version

[pgarzina]

@pgarzina instead of NPM packages use CDN version or update to twilio 2.0 version

thanks for the reply, we did migrate to 2.0 (@twilio/voice-sdk": "^2.0.1", - https://github.com/twilio/twilio-voice.js) but the error appears there as well (I tried it out on a blank angular 12.1.2 project).

I will try the CDN version as you suggested. thanks

[huannxdev]

Hi @pgarzina , Have you resolved your problem?. I got this when upgrading to angular 12

[pgarzina]

Hey @huannxdev
we have not resolved the problem, we rolled back to angular 11 until Twilio fixes it - which will potentially take a few months.

there is a suggested workaround here twilio/twilio-voice.js#28 (comment)
which we didn't have time to try out yet, but hopefully it works.

[huannxdev]

Yeah, i resolved this by steps, you can try :

• npm i util
• add code into polyfill.ts file
  (window as any).process = { env: { DEBUG: undefined }, };

[ashish-koshy]

I hope this helps someone with this issue. I created a sample boilerplate ionic-angular project that can load content from your .env file:
https://github.com/ashish-koshy/ionic-ng-pwa

Please do remember to create a .env file as it is not a part of this repo.
The value of ENVIRONMENT_NAME set in the .env file should reflect in the home component:

ENVIRONMENT_NAME=local

[Jeff-Stapleton]

Yeah, i resolved this by steps, you can try :

• npm i util
• add code into polyfill.ts file
  (window as any).process = { env: { DEBUG: undefined }, };

If I am not mistaken this will simply define process with the object you are giving it -- it still won't read your environment variables

[ashish-koshy]

@Jeff-Stapleton
Yes that's correect, this method alone would not work. The intent behind performing such a hack is for us to be able to avoid a browser/DOM exception when the browser tries to dereference an object called process.env. The problem here is that this object does not or should not exist within the context of a browser being used by a client.

process.env object only makes sense within the context of NodeJS which is a server side language having direct access to the operating system its running on as opposed to the JavaScript code running within a client's browser. The process.env object allows NodeJS developers to load values specific to the environment they deploy their server side code to.

Now, how or why the process.env object is being dereferenced in this manner by twilio's client side library is unknown to me. This is a question that has to be answered or fixed by the twilio developers.

You need to perform a few additional steps to actually make this work. You have to manually provide the process.env object to the browser before it tries to execute any of your javascript code. Again, keep in mind that this is a dirty hack that twilio developers shouldn't be expecting us to perform :

1. Install the dotenv package as a dev dependency npm install --save-dev dotenv
2. Create a file called .env at the root of your project and add some dummy key value pairs seperated by the = symbol (the non existent ones that twilio's code is trying to blindly access):

3. Add the .env file to your .gitignore (you don't want to commit this file) :

4. Now add another file at the root of your project called webpack.config.js :

You can find the code here:
https://github.com/ashish-koshy/ionic-ng-pwa/blob/main/webpack.config.js

In this step you are asking the webpack module bundler to bundle a pseudo object called process.env at build time so that the browser would eventually be able to read it at run time without throwing exceptions. The key value pairs for the process.env object would get picked from within the .env file you just created above

5. Then, in your angular.json file add the setting that allows you to load custom webpack configuration at build time:

You can find the code here:
https://github.com/ashish-koshy/ionic-ng-pwa/blob/main/angular.json

And finally for the love of god, please do not use this hack in your production code. Keep the .env file listed within your .gitignore

[Hitsaa]

I resolved the issue by adding

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

in polyfill.ts file.