Vite搭建的React项目集成Sendbird时报Buffer未定义错误如何解决？

成因 #

• @types/node仅为TypeScript类型声明包，不提供运行时的Buffer全局变量，浏览器环境原生不存在Node.js的BufferAPI
• 报错根因是Sendbird依赖的ws包（WebSocket实现）近期版本更新，新增了依赖Node.js Buffer API的逻辑，此前版本未用到该API所以运行正常。若你的项目依赖声明用了带^的版本范围，或者版本锁文件被更新，安装时会拉到最新版依赖，就会触发此前不存在的报错
• CRA可以正常运行是因为其内置的webpack默认自动注入了Node核心模块的浏览器polyfill，Vite出于性能考虑默认不做这类自动注入，因此触发报错

解决方案 #

方案1：轻量注入（推荐，仅针对Buffer缺失场景） #

1. 安装buffer运行时依赖

npm install buffer -D

2. 在项目入口文件（通常为src/main.tsx或src/main.jsx）最顶部添加如下代码：

import { Buffer } from 'buffer'
window.Buffer = Buffer

方案2：全量Node polyfill适配（适合后续还有其他Node核心模块缺失的场景） #

1. 安装依赖和Vite polyfill插件

npm install vite-plugin-node-polyfills -D

2. 修改vite.config.ts配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
  plugins: [
    react(),
    nodePolyfills({
      include: ['buffer'],
      globals: {
        Buffer: true
      }
    })
  ]
})

内容的提问来源于stack exchange，提问作者Agustin Herrera