Runtime error during dev mode with sockjs-client dependency

[pascalgn]

Describe the bug

When using sockjs-client in dev mode with vite, I get the following 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

^{(Same error, but different issue: sockjs/sockjs-client#575)}

In production mode (e.g. vite preview) it works without problems.

I think this is a bit similar to #8141, because my guess is that it has to do with the browser field, which is set in sockjs-client as:

  "browser": {
    "./lib/transport/driver/websocket.js": "./lib/transport/browser/websocket.js",
    "eventsource": "./lib/transport/browser/eventsource.js",
    "./lib/transport/driver/xhr.js": "./lib/transport/browser/abstract-xhr.js",
    "crypto": "./lib/utils/browser-crypto.js",
    "events": "./lib/event/emitter.js"
  }

When I change my vite config like this, it works, but I'm not sure if that is a good idea

export default defineConfig({
  resolve: {
    alias: {
      crypto: "./node_modules/sockjs-client/lib/utils/browser-crypto.js"
    }
  }
})

Any ideas?

Reproduction

https://stackblitz.com/edit/vitejs-vite-8purpq

System Info

  System:
    OS: macOS 12.2.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 2.13 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.19.1 - /usr/local/opt/node@14/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.16 - /usr/local/opt/node@14/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 99.0.1
    Safari: 15.3
  npmPackages:
    @vitejs/plugin-legacy: ^1.7.1 => 1.7.1 
    @vitejs/plugin-react: ^1.0.7 => 1.2.0 
    vite: ^2.8.0 => 2.8.4 

Used Package Manager

yarn

Build output

With the above workaround, the referenced file in the build looks fine:

import {
  __commonJS
} from "./chunk-6DBBYCL5.js";

// node_modules/sockjs-client/lib/utils/browser-crypto.js
var require_browser_crypto = __commonJS({
  "node_modules/sockjs-client/lib/utils/browser-crypto.js"(exports, module) {
    "use strict";
    if (global.crypto && global.crypto.getRandomValues) {
      module.exports.randomBytes = function(length) {
        var bytes = new Uint8Array(length);
        global.crypto.getRandomValues(bytes);
        return bytes;
      };
    } else {
      module.exports.randomBytes = function(length) {
        var bytes = new Array(length);
        for (var i = 0; i < length; i++) {
          bytes[i] = Math.floor(Math.random() * 256);
        }
        return bytes;
      };
    }
  }
});

export {
  require_browser_crypto
};
//# sourceMappingURL=chunk-DMEIAON6.js.map

Without the fix, the file looks empty (and therefore, crypto.randomBytes is undefined)

import {
  __esm,
  __export
} from "./chunk-6DBBYCL5.js";

// browser-external:crypto
var crypto_exports = {};
__export(crypto_exports, {
  default: () => crypto_default
});
var crypto_default;
var init_crypto = __esm({
  "browser-external:crypto"() {
    crypto_default = new Proxy({}, {
      get() {
        throw new Error('Module "crypto" has been externalized for browser compatibility and cannot be accessed in client code.');
      }
    });
  }
});

export {
  crypto_exports,
  init_crypto
};
//# sourceMappingURL=chunk-VW2V5EWT.js.map

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

Closing as it is a duplicate of #7301.