Vite 和 Sendbird 不起作用答案

【问题标题】：Vite and Sendbird does not worksVite 和 Sendbird 不起作用
【发布时间】：2021-09-30 03:43:10
【问题描述】：

我发现一个使用 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)

Buffer 是来自@types/node 的一种类型，我已经将其作为依赖项安装了。

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

如果我用 CRA 做同样的应用程序，它运行良好，这里是 sample

我认为，问题在于 Vite，但是，为什么现在而不是以前？

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

问题可能出在哪里？

最好，阿古斯

【问题讨论】：

您是否在他们的 GitHub 中提出了有关软件包依赖关系或与打字稿冲突的问题？
不，因为这是从今天早上开始的，我以为是我挑衅的错误，但我认为是Vite
我只是添加问题..等待批准github.com/vitejs/vite/issues/5108

标签： reactjs vite sendbird

【解决方案1】：

我最近在使用 Angular Elements + Sendbird 时遇到了一个非常相似的问题。我能够解决它a solution found on the react-pdf repository。

要点是 Buffer polyfill 已从 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'],
        }),
    ]
}

对于 Angular，我必须实现一个自定义的 webpack 配置来添加插件。

此外，如果它有帮助，对于其他缺少的 polyfill（即 zlib、crypto 等），我可以使用 webpack 的 resolve.fallback 将它们设置为 false，按照 documentation。

【讨论】：