Vite和Sendbird不起作用

Question

我得到了一个使用React(使用Vite)和Sendbird(一个聊天提供商)制作的应用程序一起工作，但我不知道为什么，从今天起这给了我这个错误：

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)

缓冲区是来自@types/node的类型，我已经将其安装为依赖项。

这是我做的应用示例：https://codesandbox.io/s/suspicious-stallman-pd7wj?file=/src/App.jsx

如果我用CRA做同样的应用程序，它运行得很好，下面是一个示例

我想，问题是很难解决的，但是为什么现在而不是以前呢？

这是我的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"]
}

问题在哪里？

最好，阿格斯

Answer 1

我最近遇到了一个非常类似的问题，角元素+仙鸟。我能够解决它存储库。

其要点是从webpack 4->5升级中删除缓冲区填充，并使运行时能够运行几个需要使用以下方法安装的缺少的包：

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

此外，webpack的配置需要更新如下：

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'],
        }),
    ]
}

对于角度，我必须实现一个自定义webpack配置，以添加插件。

此外，如果这有帮助，对于其他缺少的填充(如zlib、crypto等)，我能够使用webpack的resolve.fallback将这些设置为false (根据文档 )。