Angular 12, ReferenceError: process is not defined [BUG]

[pgarzina]

This is the same bug that got reported couple of months ago in twilio-client.js, and seems like it did not get fixed.
We switched over to twilio-voice.js again with angular 12, and the bug is present here as well

process not defined issue: twilio/twilio-client.js#284

Expected behavior:

The application should work fine.

Actual behavior:
Throws and error and stops working

zone.js:178 Uncaught ReferenceError: process is not defined
    at Object.1732 (main.js:1)

package.json

"dependencies": {
    "@angular/animations": "^12.1.2",
    "@angular/common": "^12.1.2",
    "@angular/compiler": "^12.1.2",
    "@angular/core": "^12.1.2",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^12.1.2",
    "@angular/platform-browser": "~12.1.2",
    "@angular/platform-browser-dynamic": "^12.1.2",
    "@angular/router": "^12.1.2",
    "@cognism/app-library": "0.0.369",
    "@ngneat/cashew": "^1.3.2",
    "@ngneat/until-destroy": "^8.0.4",
    "@ngx-loading-bar/core": "^5.1.2",
    "@swimlane/ngx-charts": "^17.0.1",
    "@tinymce/tinymce-angular": "^4.2.1",
    "@twilio/voice-sdk": "^2.0.1",
    "@types/lodash": "^4.14.168",
    "angular-calendar": "^0.28.22",
    "awesome-phonenumber": "^2.49.0",
    "class-transformer": "^0.4.0",
    "date-fns": "^2.19.0",
    "dompurify": "^2.2.7",
    "lodash": "^4.17.21",
    "ng-zorro-antd": "^12.0.1",
    "ngx-pagination": "^5.0.0",
    "rxjs": "~6.6.7",
    "single-spa": "^5.9.3",
    "single-spa-angular": "^5.0.2",
    "tslib": "^2.3.1",
    "util": "^0.12.4",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^12.1.0",
    "@angular-devkit/build-angular": "^12.1.2",
    "@angular-eslint/builder": "^12.0.0",
    "@angular-eslint/eslint-plugin": "^12.0.0",
    "@angular-eslint/eslint-plugin-template": "^12.0.0",
    "@angular-eslint/schematics": "12.3.0",
    "@angular-eslint/template-parser": "^12.0.0",
    "@angular/cli": "~12.1.2",
    "@angular/compiler-cli": "~12.1.2",
    "@tailwindcss/line-clamp": "latest",
    "@tailwindcss/typography": "latest",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^14.14.22",
    "@typescript-eslint/eslint-plugin": "4.28.2",
    "@typescript-eslint/parser": "4.28.2",
    "cross-env": "^7.0.3",
    "eslint": "^7.6.0",
    "husky": "^4.3.7",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~6.0.0",
    "jira-prepare-commit-msg": "^1.5.2",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ngx-tailwind": "^2.1.0",
    "postcss": "^8.2.8",
    "postcss-import": "^14.0.0",
    "postcss-loader": "^4.2.0",
    "postcss-scss": "^3.0.5",
    "protractor": "~7.0.0",
    "tailwindcss": "^2.1.1",
    "ts-node": "~9.1.1",
    "typescript": "~4.3.5",
    "webpack-merge": "^5.8.0"
  }

[ryan-rowland]

Hi @pgarzina,
Thanks for the report. We currently have a fix for some AMD loaders in our backlog and will be looking to address in the near future. I'll keep you updated here on this issue.

[OlegWock]

@pgarzina I'm not familiar with Angular specifics, but if you have access to your webpack config you could use DefinePlugin to override process.env.NODE_DEBUG and thus make this library work (at least while developers work on fix).

plugins = [
    /* ... */
    new webpack.DefinePlugin({
        'process.env.NODE_DEBUG': `''`, // replace any calls to process.env.NODE_DEBUG with empty string
    }),
];

[pgarzina]

@pgarzina I'm not familiar with Angular specifics, but if you have access to your webpack config you could use DefinePlugin to override process.env.NODE_DEBUG and thus make this library work (at least while developers work on fix).

plugins = [
    /* ... */
    new webpack.DefinePlugin({
        'process.env.NODE_DEBUG': `''`, // replace any calls to process.env.NODE_DEBUG with empty string
    }),
];

hey, thanks for helping out!

[charliesantos]

This will be addressed as part of #55
I'm closing this now. Please use #55 for tracking.