Svelte Typescript项目引入WebRTC库报buffer is not defined如何解决

问题根因 #

peerjs、simple-peer这类WebRTC封装库依赖Node.js内置的buffer、events模块，浏览器原生环境不提供这些API，打包时没有注入对应垫片就会触发报错。你之前添加polyfill插件后仍报错是因为rollup配置顺序、参数配置不正确导致的。

操作步骤 #

1. 安装依赖 #

执行命令安装必要的垫片和rollup插件：

# npm
npm install --save-dev rollup-plugin-polyfill-node @rollup/plugin-inject buffer
# 或者yarn
yarn add -D rollup-plugin-polyfill-node @rollup/plugin-inject buffer

2. 修改rollup配置文件 #

找到项目根目录下的rollup.config.js，按如下规则修改即可，不需要理解底层逻辑：

• 头部导入新增的插件：

import polyfillNode from 'rollup-plugin-polyfill-node'
import inject from '@rollup/plugin-inject'

• 找到plugins数组里的nodeResolve配置，添加preferBuiltins: false参数：

nodeResolve({
  browser: true,
  dedupe: ['svelte'],
  preferBuiltins: false // 新增这行，关闭优先使用Node内置模块的逻辑
})

• 在nodeResolve插件之前添加polyfillNode和inject插件配置：

plugins: [
  // 新增以下两行，注意要放在nodeResolve前面
  polyfillNode(),
  inject({
    Buffer: ['buffer', 'Buffer']
  }),
  // 原有svelte、commonjs等其他插件保持不变即可
  // ...
]

3. 兼容TS环境配置（可选） #

如果是TS项目，可在入口文件src/main.ts最顶部添加如下代码，避免类型报错：

import { Buffer } from 'buffer'
if (typeof window !== 'undefined') {
  (window as any).Buffer = Buffer
}

4. 验证效果 #

修改完配置后停止当前dev服务，重新执行yarn dev或npm run dev启动项目，再导入peerjs、simple-peer就不会再触发buffer相关报错，无需更换WebRTC库或手动实现原生逻辑。

内容的提问来源于stack exchange，提问作者Nick Grealy