Vite and Sendbird does not works

Question

I got that an app made with React(using Vite) and Sendbird(A chat provider) works together, but I don't know why, from today this is giving me this error:

Uncaught ReferenceError: Buffer is not defined
        at node_modules/ws/lib/constants.js (constants.js:5)
        at __require2 (chunk-F5R5HRHB.js?v=62787598:19)
        at node_modules/ws/lib/buffer-util.js (buffer-util.js:3)
        at __require2 (chunk-F5R5HRHB.js?v=62787598:19)
        at node_modules/ws/lib/permessage-deflate.js (permessage-deflate.js:5)
        at __require2 (chunk-F5R5HRHB.js?v=62787598:19)
        at node_modules/ws/lib/websocket.js (websocket.js:14)
        at __require2 (chunk-F5R5HRHB.js?v=62787598:19)
        at node_modules/ws/index.js (index.js:3)
        at __require2 (chunk-F5R5HRHB.js?v=62787598:19)

Buffer is a type from @types/node, that I have installed as a dependency already.

This is the app sample that I do: https://codesandbox.io/s/suspicious-stallman-pd7wj?file=/src/App.jsx

If I do the same app with CRA, it is working well, here is a sample

I think, the problem is Vite, but, why now and not before?

Here is my tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["vite/client", "node"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/ui/components/*"],
      "@styles/*": ["./src/ui/styles/*"]
    }
  },
  "include": ["./src"],
  "exclude": ["node_modules"]
}

Where could be the problem?

Best, Agus

Answer 1

I recently ran into a very similar issue with Angular Elements + Sendbird. I was able to resolve it a solution found on the react-pdf repository.

The gist is that the Buffer polyfill was removed from webpack 4->5 upgrade, and to get the runtime to work several missing packages needed to be installed using:

npm install assert browserify-zlib buffer process stream-browserify util

Additionally, the webpack configuration needed to be updated as follows:

const webpack = require('webpack');

module.exports = {
 {...}
    resolve: {
        alias: {
            process: 'process/browser',
            stream: "stream-browserify",
            zlib: "browserify-zlib"
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    ]
}

For Angular specifically, I had to implement a custom webpack config to add the plugin.

Also, in case it helps, for other missing polyfills (i.e. zlib, crypto, etc.), I was able to use webpack's resolve.fallback to set these to false as per the documentation.