Electron项目导入Realm报错：无法解析模块标识符'realm'

问题原因 #

Electron渲染进程默认遵循浏览器ES模块规范，无法直接解析"realm"这类裸模块名（非相对/绝对路径），同时默认的安全配置（contextIsolation: true、nodeIntegration: false）也限制了渲染进程直接访问Node.js模块。

解决方案 #

方案1：使用Preload脚本（推荐，符合安全规范） #

这是Electron官方推荐的安全做法，通过预加载脚本在主进程上下文导入Realm，再暴露给渲染进程：

1. 配置主进程（main.js）：

   const { app, BrowserWindow } = require('electron');
   const path = require('path');
   
   function createWindow() {
     const mainWindow = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         preload: path.join(__dirname, 'preload.js'),
         contextIsolation: true, // 保持开启，保障安全
         nodeIntegration: false
       }
     });
     mainWindow.loadFile('index.html');
   }
   app.whenReady().then(createWindow);
   

2. 编写preload.js：

   const { contextBridge } = require('electron');
   const Realm = require('realm');
   
   // 向渲染进程暴露Realm实例
   contextBridge.exposeInMainWorld('electronRealm', {
     Realm: Realm
   });
   

3. 在render.js中使用：

   // 不再直接import，使用暴露的全局对象
   const Realm = window.electronRealm.Realm;
   
   // 后续正常初始化Realm
   const realm = new Realm({ schema: [YourSchema] });
   

方案2：用打包工具处理模块解析 #

如果你的项目使用Vite、Webpack等打包工具，它们会自动处理npm包的模块解析：

• 确保render.js作为打包入口，打包工具会将import Realm from "realm";转换为浏览器可识别的路径。
• 在index.html中引入打包后的产物（而非原始render.js）。

方案3：临时开启Node.js集成（仅开发测试用） #

不推荐生产环境使用，会降低应用安全性：

1. 修改主进程的BrowserWindow配置：

   webPreferences: {
     nodeIntegration: true,
     contextIsolation: false
   }
   

2. 在render.js中改用CommonJS语法导入：

   const Realm = require('realm');
   

额外注意事项 #

• 确认realm包版本与你的Electron版本兼容，可通过npm list electron realm查看版本，参考Realm官方版本适配说明。
• 若使用浏览器端的realm-web，可通过CDN引入后直接使用：

  <script src="https://unpkg.com/realm-web@latest/dist/bundle.iife.js"></script>
  

  然后在render.js中调用const Realm = window.Realm;

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