Sketch插件导入discord-rpc出现MOJavaScriptException错误求助

错误原因 #

报错来自node-fetch的browser.js文件，Sketch基于JavaScriptCore运行，既不是完整浏览器环境也不是标准Node.js环境，没有全局的Headers对象（这是浏览器Fetch API的一部分），而discord-rpc依赖的node-fetch分支代码直接尝试赋值global.Headers，触发类型错误。

解决方案 #

方案1：提前注入模拟的Headers对象 #

在导入discord-rpc前，手动在全局环境添加简化版的Headers实现，覆盖缺失的API：

// 优先添加全局Headers模拟，适配Sketch环境
global.Headers = class Headers {
  constructor(init) {
    this._headers = new Map();
    if (init && typeof init === 'object') {
      Object.keys(init).forEach(key => this.append(key, init[key]));
    }
  }

  append(key, value) {
    this._headers.set(key.toLowerCase(), value);
  }

  get(key) {
    return this._headers.get(key.toLowerCase());
  }

  has(key) {
    return this._headers.has(key.toLowerCase());
  }

  set(key, value) {
    this._headers.set(key.toLowerCase(), value);
  }
};

// 之后再导入discord-rpc和sketch
import sketch from 'sketch'
const { Client } = require("discord-rpc");

export default function() {
  // 你的插件逻辑
}

方案2：用patch-package修改node-fetch依赖 #

如果不想在业务代码里加模拟逻辑，可以通过补丁工具修改node-fetch的源码，让它兼容Sketch环境：

1. 安装补丁工具：npm install patch-package --save-dev
2. 打开node_modules/node-fetch/browser.js，找到exports.Headers = global.Headers这一行（约第23行），替换为：

exports.Headers = global.Headers || class Headers {
  constructor(init) {
    this._headers = new Map();
    if (init && typeof init === 'object') {
      Object.keys(init).forEach(key => this.append(key, init[key]));
    }
  }

  append(key, value) {
    this._headers.set(key.toLowerCase(), value);
  }

  get(key) {
    return this._headers.get(key.toLowerCase());
  }

  has(key) {
    return this._headers.has(key.toLowerCase());
  }

  set(key, value) {
    this._headers.set(key.toLowerCase(), value);
  }
};

3. 执行命令生成补丁：npx patch-package node-fetch
4. 后续安装依赖时，补丁会自动被应用。

注意事项 #

解决这个错误后，可能还会遇到其他环境兼容问题（比如discord-rpc依赖的Node.js IPC模块在Sketch环境中不可用），这时需要进一步适配Sketch的原生IPC机制，或者考虑使用基于WebSocket的Discord RPC实现。

内容的提问来源于stack exchange，提问作者Che-Lin Chan