React+Electron+SQLite TS项目InsertArticle报错：无法解析'path'模块

1. 检查主进程 Webpack 配置的 target #

主进程运行在 Node.js 环境下，不需要浏览器端的 polyfill，必须确保 Webpack 配置的 target 为 electron-main，而非浏览器环境的 web 或 electron-renderer。

修改主进程的 webpack.config.ts：

export default {
  target: 'electron-main', // 关键配置，必须设置
  // 其他配置入口、输出等...
}

2. 避免渲染进程直接引入主进程模块 #

你的报错大概率是因为渲染进程（React 代码）直接导入了主进程的 Database.service.ts——getAllArticles 没用到 path 所以没报错，InsertArticle 用到了才触发问题。

正确的做法是通过 Electron IPC 通信，而非直接暴露主进程模块：

• preload.ts：仅暴露 IPC 调用接口

import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electronAPI', {
  getAllArticles: () => ipcRenderer.invoke('get-all-articles'),
  insertArticle: (article: ArticleType) => ipcRenderer.invoke('insert-article', article)
});

• main.ts：主进程监听 IPC 并调用数据库方法

import { ipcMain } from 'electron';
import dbService from './services/Database.service';

ipcMain.handle('get-all-articles', async () => {
  return await dbService.getAllArticles();
});

ipcMain.handle('insert-article', async (_, article) => {
  return await dbService.InsertArticle(article);
});

• 渲染进程（React 组件）：调用暴露的 API

// 调用示例
const insertNewArticle = async (article) => {
  await window.electronAPI.insertArticle(article);
};

3. 若确需在渲染进程用 path（不推荐） #

如果必须在浏览器环境使用 path，按以下步骤配置：

1. 安装依赖：

npm install path-browserify --save-dev

2. 修改渲染进程的 webpack.config.ts：

export default {
  // ...其他配置
  resolve: {
    fallback: {
      "path": require.resolve("path-browserify")
    }
  }
}

3. 移除 Webpack 中可能存在的 node: { module: 'empty' } 这类禁用 Node 模块的配置。

4. 清理缓存并重建 #

执行以下命令清理 Webpack 缓存，确保配置生效：

rm -rf node_modules/.cache
npm run build

5. 检查 TypeScript 配置 #

主进程的 tsconfig.json 需包含 Node.js 类型支持：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "types": ["node"], // 确保能识别 Node 核心模块
    "outDir": "../dist/main"
  },
  "include": ["**/*.ts"]
}

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