Electron/Vite中fs.watch返回非FSWatcher实例，无法调用close()

问题原因 #

Electron的上下文隔离机制会对跨上下文（预加载脚本 ↔ 渲染进程）传递的对象执行结构化克隆，Node.js的FSWatcher实例包含无法序列化的内部句柄和原型方法，传递到渲染进程后会被转化为普通对象，丢失了原型上的close()方法，这就是调用watcher.close()时报错的核心原因。

解决方案 #

不要直接将fs.watch暴露给渲染进程，而是在预加载脚本中封装watcher管理逻辑，通过唯一ID追踪和关闭监听：

1. 修改预加载脚本 #

import { contextBridge } from 'electron'
import fs from 'fs'

// 用Map存储watcher实例，通过ID关联
const watcherMap = new Map()
let nextWatcherId = 0

const fileWatchApi = {
  // 封装watch方法，返回唯一ID
  watch: (filePath, callback) => {
    const watcherId = nextWatcherId++
    const watcher = fs.watch(filePath, callback)
    watcherMap.set(watcherId, watcher)
    return watcherId
  },
  // 通过ID关闭指定watcher
  closeWatcher: (watcherId) => {
    const watcher = watcherMap.get(watcherId)
    if (watcher) {
      watcher.close()
      watcherMap.delete(watcherId)
    }
  }
}

// 暴露API到渲染进程
contextBridge.exposeInMainWorld('fileWatchApi', fileWatchApi)

2. 修改渲染进程代码 #

let currentWatcherId = window.fileWatchApi.watch(file1, (eventType, filename) => {
  // 你的文件变更监听逻辑
})

setTimeout(() => {
  // 通过ID关闭旧监听
  window.fileWatchApi.closeWatcher(currentWatcherId)
  // 创建新监听并更新ID
  currentWatcherId = window.fileWatchApi.watch(file2, (eventType, filename) => {
    // 新的文件变更监听逻辑
  })
}, 5000)

补充说明 #

• 这种方式将所有watcher的管理逻辑放在预加载脚本的Node.js环境中，避免了跨上下文传递FSWatcher实例，确保close()方法能正常调用。
• 若需要支持多文件监听、批量关闭或错误处理，可基于这个基础逻辑扩展。

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