NuxtJS（Vue.js）集成PeerJS出现Cannot set properties of undefined报错求解

报错原因 #

PeerJS 是完全依赖浏览器运行环境的库，底层需要调用浏览器专属的 window、RTCPeerConnection 等全局 API，你当前配置中给 peerjs 插件开启了 ssr: true，Nuxt 在服务端渲染阶段就会加载执行 PeerJS 代码，而 Node 服务端环境没有浏览器的全局对象，PeerJS 初始化时尝试给不存在的对象挂载 _events 属性就会抛出该类型错误。

解决方法 #

1. 修改插件加载规则，仅允许客户端加载该插件 #

你可以二选一操作：

• 方案A：修改 nuxt.config.js 中的插件配置，把 ssr 参数改为 false

plugins: [
  { src: "~/plugins/peerjs.js", ssr: false }
]

• 方案B：直接把插件文件重命名为 peerjs.client.js，Nuxt 会自动识别 .client.js 后缀的文件，仅在客户端环境加载，无需额外配置 ssr 参数。

2. 调整 Peer 实例的初始化时机 #

所有初始化 Peer 实例、调用 PeerJS API 的代码，必须放在仅客户端执行的生命周期中：

• Vue 2/Nuxt 2 项目放在 mounted 钩子中执行，不要放在 created、asyncData、fetch 这类会在服务端触发的生命周期里
• 用到 PeerJS 相关功能的组件，也可以用 Nuxt 内置的 <client-only> 标签包裹，避免服务端渲染时报错

（可选）全局注入 Peer 方便调用 #

如果你需要在全项目复用 Peer，可修改插件代码注入到 Vue 实例中：

// /plugins/peerjs.client.js
import Peer from 'peerjs'

export default ({ app }, inject) => {
  // 全局注入 $peer 方法
  inject('peer', Peer)
}

组件内使用示例：

export default {
  mounted() {
    // 仅客户端执行，环境安全
    const myPeer = new this.$peer('自定义的peerID')
    // 后续写连接、传输等逻辑
  }
}

内容的提问来源于stack exchange，提问作者E. Williams