crypto.randombytes is not function with socket js client

[ajaydhakane]

While creating SockJs instance (let ws = new SockJS('https://abc.com/ws') it is giving the following error.

core.mjs:6484 ERROR TypeError: crypto.randomBytes is not a function
    at Object.string (random.js:11:1)
    at Object.unloadAdd (event.js:39:1)
    at XHRCorsObject.AbstractXHRObject._start (abstract-xhr.js:48:1)
    at abstract-xhr.js:21:1
    at timer (zone.js:3083:1)
    at ZoneDelegate.invokeTask (zone.js:434:1)
    at Object.onInvokeTask (core.mjs:25463:33)
    at ZoneDelegate.invokeTask (zone.js:433:1)
    at Zone.runTask (zone.js:205:1)
    at ZoneTask.invokeTask (zone.js:516:1)

Package JSON

"dependencies": {
    "@angular/animations": "~13.0.3",
    "@angular/cdk": "^13.0.3",
    "@angular/common": "~13.0.3",
    "@angular/compiler": "~13.0.3",
    "@angular/core": "~13.0.3",
    "@angular/flex-layout": "^13.0.0-beta.36",
    "@angular/forms": "~13.0.3",
    "@angular/material": "^13.0.3",
    "@angular/platform-browser": "~13.0.3",
    "@angular/platform-browser-dynamic": "~13.0.3",
    "@angular/router": "~13.0.3",
    "@angular/service-worker": "~13.0.3",
    "@material-extended/mde": "^3.0.3",
    "@ngrx/store": "^13.0.1",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@stomp/stompjs": "^5.4.4",
    "@stripe/stripe-js": "^1.22.0",
    "@types/lodash": "^4.14.170",
    "@types/sockjs-client": "^1.1.1",
    "@types/sprintf-js": "^1.1.2",
    "@types/stompjs": "^2.3.4",
    "angular-user-idle": "^2.2.5",
    "crypto-js": "^4.0.0",
    "jquery": "^3.6.0",
    "net": "^1.0.2",
    "ngx-device-detector": "^2.0.10",
    "ngx-image-cropper": "^5.0.1",
    "ngx-mask": "^12.0.0",
    "ngx-matomo": "^0.1.4",
    "ngx-skeleton-loader": "^4.0.0",
    "ngx-slick-carousel": "^0.5.1",
    "ngx-smart-popover": "^1.4.0",
    "ngx-stripe": "^13.0.0",
    "reading-time": "^1.3.0",
    "rxjs": "~6.6.7",
    "slick-carousel": "^1.8.1",
    "sockjs-client": "^1.5.2",
    "sprintf": "^0.1.5",
    "sprintf-js": "^1.1.2",
    "stompjs": "^2.3.3",
    "tslib": "^2.2.0",
    "webpack": "^5.65.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.4",
    "@angular-eslint/builder": "^12.0.0",
    "@angular-eslint/eslint-plugin": "^12.0.0",
    "@angular-eslint/eslint-plugin-template": "^12.0.0",
    "@angular-eslint/schematics": "13.0.1",
    "@angular-eslint/template-parser": "^12.0.0",
    "@angular/cli": "^13.0.4",
    "@angular/compiler-cli": "~13.0.3",
    "@cypress/webpack-preprocessor": "5.7.0",
    "@types/crypto-js": "^4.0.1",
    "@types/events": "^3.0.0",
    "@types/jasmine": "^3.6.11",
    "@types/jest": "^26.0.23",
    "@types/node": "~12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "cross-env": "^7.0.3",
    "eslint": "^8.2.0",
    "eslint-plugin-angular": "^4.0.1",
    "eslint-plugin-import": "2.25.2",
    "eslint-plugin-jsdoc": "33.1.1",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "eslint-plugin-prettier": "^3.4.0",
    "husky": "^6.0.0",
    "jasmine-core": "~3.7.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ts-loader": "9.1.2",
    "ts-node": "~9.1.1",
    "typescript": "~4.4.4",
    "webpack-bundle-analyzer": "^4.4.1"
  }

I am also facing the same issue, but unable to fix that issue, already I had used crytojs file since started implementation of websocket in vite gave me the issue

Originally posted by @ajaydhakane in #575