Failure when Use Vite to setup an Vue3 project, error on hash.js line 1 : require('safe-buffer').Buffer

[kirahan]

Description:

I create an Vue3 project based on Vite, When I try to import obs-websocket-js by
import OBSWebSocket from 'obs-websocket-js'
const obs = new OBSWebSocket()
obs.connect();
I get an error info:

• Can't load obs-websocket-js with an error:

index.js:12 Uncaught TypeError: Cannot read property 'from' of undefined
   at node_modules/safe-buffer/index.js (index.js:12)
    at __require (chunk-XNAE4CLY.js?v=dbf754e5:7)
    at node_modules/sha.js/hash.js (hash.js:1)
    at __require (chunk-XNAE4CLY.js?v=dbf754e5:7)
    at node_modules/sha.js/sha256.js (sha256.js:10)
    at __require (chunk-XNAE4CLY.js?v=dbf754e5:7)
    at node_modules/obs-websocket-js/lib/util/authenticationHashing.js (authenticationHashing.js:1)
    at __require (chunk-XNAE4CLY.js?v=dbf754e5:7)
    at node_modules/obs-websocket-js/lib/Socket.js (Socket.js:3)
    at __require (chunk-XNAE4CLY.js?v=dbf754e5:7)

It seems the dependencies safe-buffer can't init, import by sha.js in file hash.js line 1.
safe-buffer is a quite famous package, about 50M downloads per week

Steps to Reproduce an issue

1. Try to test version 4.0.2 4.0.1 3.1.0 both error
2. try to edit the hash.js file, but seems not working
3. use same source code by Vue-cli4(use webpack) not Vite, it's working very well

So I found that maybe the way Vite compile the dependencies is the reason, but I still don't how to solve it.
By the way, on Vite both javascript and typescript can't working.
As your know, vite is quiet fast than webpack, and a lot of vue3 project already use Vite to create their project, so I hope your can test why this package can't working on vite, thanks a lot

Versions Used (if applicable):

• obs-websocket-js version: 4.0.2
• obs-websocket plugin version: 4.9.0
• obs-studio version:27.0.1
• node version:14.15.5
• vue version: 3.0.5
• TypeScript version: 4.3.2
• vite version:2.3.7

[t2t2]

Noticed the same issue when doing research for v5:

Turns out sha.js uses safe-buffer which requires buffer, which is native in node, webpack automatically polyfills but rollup doesn't, so adding npm install buffer

Run npm install buffer to install browser compatible version that then will be used. sha.js will not be used in the 5.x version.