Electron应用中导入Node Addon作为ESM模块时遇冲突求助

架构老林

2026-7-1

Electron-react应用导入Node Addon时遇到无法解决的冲突

在使用electron-vite创建的Electron-react应用中，尝试导入一个简单的Node Addon，但导入时遇到无法解决的冲突。

Addon相关文件

addon/hello.cpp

#include <node.h>

using namespace v8;

void Method (const FunctionCallbackInfo<Value> &args)
{
  Isolate *isolate = args.GetIsolate ();
  args.GetReturnValue ().Set (
      String::NewFromUtf8 (isolate, "world").ToLocalChecked ());
}

void Initialize (Local<Object> exports)
{
  NODE_SET_METHOD (exports, "hello", Method);
}

NODE_MODULE (NODE_GYP_MODULE_NAME, Initialize)

addon/binding.gyp

{
  "targets": [
    {
      "target_name": "hello_addon",
      "sources": ["hello.cpp"]
    }
  ]
}

addon/wrapper.js

/* eslint @typescript-eslint/no-var-requires: "off" */
let addon

try {
  const addon = require('./build/Release/hello_addon')
} catch (error) {
  console.error('ERROR ON LOAD ADDON')
  console.error(error)
}

export default addon

主进程导入代码（src/main/index.ts）

...
import addon from '../../addon/wrapper'

function createWindow(): void {

  const mainWindow = new BrowserWindow({
  ...
    },
  })

  ipcMain.handle('test-addon', async () => {
    console.log('test-node-addon')
    // console.log(addon.hello())

    return addon.hello()
  })

...

预加载进程通信代码（src/preload/index.ts）

...
declare global {
  export interface Window {
    electron: ElectronAPI
    api: typeof api
  }
}

// Custom APIs for renderer
const api = {
  testAddon() {
    return ipcRenderer.invoke('test-addon')
  },
}
...

渲染器组件调用代码（src/renderer/src/components/MainWindow.tsx）

export function MainWindow() {
 window.api.testAddon().then(console.log)
  return (
    <div className="text-red-600 border">
      Spectrum Analizer
    </div>
  )
}